import React from 'react'

// hoooks
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../../../../redux/store';

// Components
import Dialog from '../../../../GenericUIBlocks/Dialog/V2';
import GeneralSelect from '../../../../GenericUIBlocks/GeneralSelect';

// Messages
import { MESSAGES } from '../../../../../utils/message';

// Icons
// @ts-ignore
import Input from '../../../../GenericUIBlocks/Input';

// Styles
import './styles.scss'

const designDialogStyles = {
    maxWidth: '488px',
    backgroundColor: '#fff',
    padding: '39px',
};

// Interface for QRCodeModal props
interface QRCodeModalProps {
    show: boolean;
    utms?: any;
    utmFields?: any;
    handleSelect?: any;
    isEditing?: boolean;
    setQrUrl: (value: string) => void;
    setUtmSource: (value: string) => void;
    setUtmMedium: (value: string) => void;
    setCustomUtms: (utms: string[]) => void;
    handleDialogChange: (model: string) => void;
    handleClose: () => void;
    setUtmCampaignName: (value: string) => void;
    addNewQRCode: () => void;
    loading: boolean;
}

const QRCodeModal: React.FC<QRCodeModalProps> = ({
    show,
    utms,
    utmFields,
    handleSelect,
    isEditing,
    handleDialogChange,
    handleClose,
    setUtmCampaignName,
    setQrUrl,
    setUtmSource,
    setUtmMedium,
    addNewQRCode,
    loading
}) => {

    const url = useSelector((state: RootState) => state.customQRCode.url);
    const utmSource = useSelector((state: RootState) => state.customQRCode.utmSource);
    const utmMedium = useSelector((state: RootState) => state.customQRCode.utmMedium);
    const utmCampaignName = useSelector((state: RootState) => state.customQRCode.utmCampaignName);
    const customUtms = useSelector((state: RootState) => state.customQRCode.customUtms);
    const isQR = useSelector((state: RootState) => state.customQRCode.isQR);


    const dispatch: AppDispatch = useDispatch();

    return (
        <Dialog
            title={isEditing ? MESSAGES.QR_CODE_MODAL.UPDATE_TITLE : MESSAGES.QR_CODE_MODAL.CREATE_TITLE}
            subHeading={''}
            description={''}
            open={show}
            handleClose={() => handleClose()}
            onCancel={() => handleClose()}
            onSubmit={() => addNewQRCode()}
            customStyles={designDialogStyles}
            cancelText="Cancel"
            submitText="Save"
            currentTheme="v2"
            isQRCode={true}
            loading={loading}
        >
            <div className="qr-modal-input-wrapper">
                <Input
                    type="text"
                    value={utmCampaignName}
                    onChange={(e: any) => {
                        dispatch(setUtmCampaignName(e.target.value));
                    }}
                    placeholder={MESSAGES.QR_CODE_MODAL.INPUT.PLACEHOLDER}
                    inputIcon={false}
                    label={MESSAGES.QR_CODE_MODAL.INPUT.LABEL}
                    currentTheme="v2"
                    required={true}
                />
                <Input
                    type="text"
                    value={url}
                    onChange={(e: any) => {
                        dispatch(setQrUrl(e.target.value));
                    }}
                    placeholder="Enter QR URL"
                    inputIcon={false}
                    label="QR URL"
                    currentTheme="v2"
                    required={true}
                />
                <div className="utm-inputs">
                    <Input
                        type="text"
                        value={utmSource}
                        onChange={(e: any) => {
                            dispatch(setUtmSource(e.target.value));
                        }}
                        placeholder="Enter UTM Source"
                        inputIcon={false}
                        error={''}
                        label="UTM Source"
                        currentTheme="v2"
                        isClearable
                        removeSearchInput={() => {
                            dispatch(setUtmSource(''));
                        }}
                    />
                    <Input
                        type="text"
                        value={utmMedium}
                        onChange={(e: any) => {
                            dispatch(setUtmMedium(e.target.value));
                        }}
                        placeholder="Enter UTM Medium"
                        inputIcon={false}
                        error={''}
                        label="UTM Medium"
                        currentTheme="v2"
                        isClearable
                        removeSearchInput={() => {
                            dispatch(setUtmMedium(''));
                        }}
                    />
                </div>

                {utms?.map((utm: string, idx: any) => {
                    return (
                        <div className="qr-input-wrapper-v2" key={idx}>
                            <label>{utm.toUpperCase().replace(/\_/g, ' ')}:</label>
                            <GeneralSelect
                                placeholder={`Search / Select Custom UTM ${idx + 1}`}
                                options={utmFields as any}
                                setSelectedValue={(value: any) => handleSelect(utm, value)}
                                selectedValue={customUtms[utm] || (null as any)}
                                builderSelect={true}
                                clearField={true}
                                search={true}
                                qrField={true}
                                isError={false}
                                gallerySelect={false}
                                currentTheme="v2"
                            />
                        </div>
                    );
                })}
            </div>
        </Dialog>
    )
}

export default QRCodeModal;