'use client'
import Modal from '@/Component/Common/Modal';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import { InfoCircleSVG } from '@/Component/Common/SVGs/CommonSVG';

type ChatAttachmentChoiceType = 'draft' | 'post';

interface ChatAttachmentChoiceModalProps {
    type: ChatAttachmentChoiceType | null;
    setType: (type: ChatAttachmentChoiceType | null) => void;
    brandName: string;
    translations: Record<string, string>;
    onUploadAttachment: () => void;
    onUploadDraft: () => void;
    onPostDeliverable: () => void;
}

const ChatAttachmentChoiceModal = (props: ChatAttachmentChoiceModalProps) => {
    const { type, setType, brandName, translations, onUploadAttachment, onUploadDraft, onPostDeliverable } = props;

    if (!type) return null;

    const isDraft = type === 'draft';
    const title = isDraft ? translations?.chatAttachmentChoiceTitleDraft : translations?.chatAttachmentChoiceTitlePost;
    const body = isDraft
        ? translations?.chatAttachmentChoiceBodyDraft?.replace('[brandName]', brandName)
        : translations?.chatAttachmentChoiceBodyPost?.replace(/\[BrandName\]/g, brandName);

    const handleUploadAttachment = () => {
        setType(null);
        onUploadAttachment();
    };

    const handlePrimary = () => {
        setType(null);
        if (isDraft) {
            onUploadDraft();
        } else {
            onPostDeliverable();
        }
    };

    return (
        <Modal modalSize="md:w-2/4 lg:w-1/3 xl:w-96 2xl:w-[26rem]" modal={type} setModal={() => setType(null)}>
            <div className="text-center py-2">
                {/* <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-yellow-400/10">
                    <InfoCircleSVG customClass="h-14 w-14 text-yellow-400" />
                </div> */}
                <h3 className="mb-3 text-base font-semibold text-neutral-900 tracking-tight">
                    {title}
                </h3>
                <p
                    className="mb-6 text-sm text-neutral-700"
                    dangerouslySetInnerHTML={{ __html: body }}
                />
                <div className="flex justify-center gap-2">
                    <BorderButton customClass="w-full !text-xs" onClick={handleUploadAttachment}>
                        {translations?.uploadAttachment}
                    </BorderButton>
                    <PrimaryButton customClass="w-full !text-xs" onClick={handlePrimary}>
                        {isDraft ? translations?.uploadDraft : translations?.postDeliverable}
                    </PrimaryButton>
                </div>
            </div>
        </Modal>
    );
};

export default ChatAttachmentChoiceModal;