import { ProcessStep } from "@/entities/transaction/model/types";
import { useSetOnBack } from "@/widgets/sub-layout/use-sub-layout";
import { IdentityType, Language } from '@/entities/additional-service/model/types'
import { LinkContentType, LinkPaymentFormData } from "@/entities/additional-service/model/link-pay/types";
import { PatternFormat } from 'react-number-format';

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

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


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

    const handleIdendityTypeChange = (type: IdentityType) => {
        setFormData({ ...formData, identityType: type });
    }

    const handleLanguageType = (type: Language) => {
        setFormData({ ...formData, language: type });
    }

    const handleLinkContent = (content: LinkContentType) => {
        setFormData({ ...formData, linkContentType: content });
    }

    const handleIdentityToggle = (isChecked: boolean) => {
        setFormData({ ...formData, isIdentity: isChecked });
    }

    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.buyerName}
                            onChange={(e) => handleInputChange('buyerName', e.target.value)}
                        />
                    </div>
                </div>

                {formData.sendMethod === 'EMAIL' &&
                    <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.email}
                                onChange={(e) => handleInputChange('email', e.target.value)}
                            />
                        </div>
                    </div>
                }

                {(formData.sendMethod === 'SMS' || formData.sendMethod === 'KAKAO') &&
                    <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.phoneNumber}
                                onChange={(e) => handleInputChange('phoneNumber', 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" checked={formData.isIdentity} onChange={(e) => handleIdentityToggle(e.target.checked)} />
                        <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 ${formData.identityType === IdentityType.INDIVIDUAL ? 'active' : ''} ${!formData.isIdentity ? 'disabled' : ''}`}
                                onClick={() => formData.isIdentity && handleIdendityTypeChange(IdentityType.INDIVIDUAL)}
                                style={!formData.isIdentity ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
                            >
                                개인
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.CORPORATE ? 'active' : ''} ${!formData.isIdentity ? 'disabled' : ''}`}
                                onClick={() => formData.isIdentity && handleIdendityTypeChange(IdentityType.CORPORATE)}
                                style={!formData.isIdentity ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
                            >
                                법인
                            </span>
                        </div>
                    </div>
                </div>

                <div className="issue-row gap-10">
                    <div className="issue-label wid-105"></div>
                    <div className='issue-field'>
                        {formData.identityType === IdentityType.CORPORATE ? (
                            <PatternFormat
                                format="##########"
                                placeholder="사업자번호 10자리"
                                value={formData.identityValue}
                                valueIsNumericString
                                onValueChange={(values) => {
                                    const { value } = values;
                                    handleInputChange('identityValue', value);
                                }}
                                disabled={!formData.isIdentity}
                            />
                        ) : (
                            <PatternFormat
                                format="######"
                                placeholder="생년월일 6자리"
                                value={formData.identityValue}
                                valueIsNumericString
                                onValueChange={(values) => {
                                    const { value } = values;
                                    handleInputChange('identityValue', value);
                                }}
                                disabled={!formData.isIdentity}
                            />
                        )}
                    </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 ${formData.language === Language.KR ? 'active' : ''}`}
                                onClick={() => handleLanguageType(Language.KR)}
                            >
                                국문
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${formData.language === Language.EN ? 'active' : ''}`}
                                onClick={() => handleLanguageType(Language.EN)}
                            >
                                영문
                            </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 ${formData.linkContentType === LinkContentType.BASIC ? 'active' : ''}`}
                                onClick={() => handleLinkContent(LinkContentType.BASIC)}
                            >
                                기본
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${formData.linkContentType === LinkContentType.ADDITIONAL ? 'active' : ''}`}
                                onClick={() => handleLinkContent(LinkContentType.ADDITIONAL)}
                            >
                                추가
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}