import {ProcessStep} from "@/entities/transaction/model/types";
import {useSetOnBack} from "@/widgets/sub-layout/use-sub-layout";
import {useState} from "react";

export interface LinkPaymentStep2Props {
    setProcessStep: ((processStep: ProcessStep) => void);
}

export const LinkPaymentStep2 = ({
    setProcessStep
}: LinkPaymentStep2Props) => {
    useSetOnBack(() => {
        setProcessStep(ProcessStep.One);
    });

    const handleInputChange = (field: string, value: string) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }));
    };

    const [selectedPurchaserType, setSelectedPurchaserType] = useState('개인');
    const [selectedLanguage, setSelectedLanguage] = useState('국문')
    const [selectedLinkContent, setSelectedLinkContent] = useState('기본');
    const [formData, setFormData] = useState({
        purchaser: '',
        purchaserEmail: '',
        purchaserPhone: '',
        purchaserBirth: ''
    });

    const handlePurchaserTypeChange = (type: string) => {
        setSelectedPurchaserType(type)
    }

    const handleLanguageType = (type: string) => {
        setSelectedLanguage(type)
    }

    const handleLinkContent = (content: string) => {
        setSelectedLinkContent(content)
    }

    return (
        <>
            <div className="issue-form">
                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">구매자명</div>
                    <div className="issue-field">
                        <input
                            type="text"
                            placeholder=""
                            value={formData.purchaser}
                            onChange={(e) => handleInputChange('purchaser', e.target.value)}
                        />
                    </div>
                </div>

                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">구매자 이메일</div>
                    <div className="issue-field">
                        <input
                            type="text"
                            placeholder="test@nicepay.co.kr"
                            value={formData.purchaserEmail}
                            onChange={(e) => handleInputChange('purchaserEmail', e.target.value)}
                        />
                    </div>
                </div>

                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">구매자<br/>휴대폰 번호</div>
                    <div className="issue-field">
                        <input
                            type="text"
                            placeholder="01012345678"
                            value={formData.purchaserPhone}
                            onChange={(e) => handleInputChange('purchaserPhone', e.target.value)}
                        />
                    </div>
                </div>

                <div className="issue-row gap-10 beetween">
                    <div className="issue-label wid-105">구매자 정보 대조</div>
                    <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                    </label>
                </div>
                <div className="issue-row gap-10">
                    <div className="issue-label wid-105"></div>
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
                                className={`keyword-tag flex-1 ${selectedPurchaserType === '개인' ? 'active' : ''}`}
                                onClick={() => handlePurchaserTypeChange('개인')}
                            >
                                개인
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${selectedPurchaserType === '법인' ? 'active' : ''}`}
                                onClick={() => handlePurchaserTypeChange('법인')}
                            >
                                법인
                            </span>
                        </div>
                    </div>
                </div>

                <div className="issue-row gap-10">
                    <div className="issue-label wid-105"></div>
                    <div className='issue-field'>
                        <input
                            type="text"
                            placeholder="생년월일 6자리"
                            value={formData.purchaserBirth}
                            onChange={(e) => handleInputChange('purchaserPhone', e.target.value)}
                        />
                    </div>
                </div>

                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">언어</div>
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
                                className={`keyword-tag flex-1 ${selectedLanguage === '국문' ? 'active' : ''}`}
                                onClick={() => handleLanguageType('국문')}
                            >
                                국문
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${selectedLanguage === '영문' ? 'active' : ''}`}
                                onClick={() => handleLanguageType('영문')}
                            >
                                영문
                            </span>
                        </div>
                    </div>
                </div>
                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">링크내용</div>
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
                                className={`keyword-tag flex-1 ${selectedLinkContent === '기본' ? 'active' : ''}`}
                                onClick={() => handleLinkContent('기본')}
                            >
                                기본
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${selectedLinkContent === '추가' ? 'active' : ''}`}
                                onClick={() => handleLinkContent('추가')}
                            >
                                추가
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}