'use client';

import { useState } from "react";
import { Box, Button, Modal } from "@mui/material";

// Icon
import ArrowBottomH from "@/components/icons/ArrowBottomH";
import Location from "@/components/icons/Location";
import { styleDefault } from "@/mui";
import CloseModalD from "@/components/icons/CloseModalD";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import ArrowLeftM from "@/components/icons/ArrowLeftM";

function ModalSearchCity() {

    const states = [
        { label: 'تهران', id: 10 },
        { label: 'اصفهان', id: 20 },
        { label: 'مازندران', id: 30 }
    ];

    const cities = [
        { label: 'پردیس', id: 10 },
        { label: 'دماوند', id: 20 },
        { label: 'فیروزکوه', id: 30 }
    ];

    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    const [selected, setSelected] = useState({
        first: '',
        second: ''
    });

    const updateData = (event, name) =>
        setSelected({ ...selected, [name]: event.target.innerText })

    return (
        <>
            {/* Button Modal */}
            <Button
                className="!border-none hover:!bg-transparent !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
                onClick={handleOpen}
                variant="contained"
                color="secondary"
            >
                <div className="min-w-[20px] min-h-[20px] hidden md:flex">
                    <Location />
                </div>
                <p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">
                    {selected.first && selected.second ?
                        `${selected.first} | ${selected.second}` : 'انتخاب شهر'}
                </p>
                <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
                    <ArrowBottomH />
                </div>
            </Button>
            {/* Content Modal */}
            <Modal
                open={open}
                onClose={handleClose}
            >
                <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
                    <div
                        className="flex justify-end w-full"
                    >
                        <div className="cursor-pointer" onClick={handleClose}>
                            <CloseModalD />
                        </div>
                    </div>
                    <div className="md:p-[24px] pt-0">
                        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
                        <div className="flex flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
                            <AutoCompleteSelect
                                updateData={updateData}
                                list={states}
                                label='استان'
                                name='first'
                            />
                            <AutoCompleteSelect
                                updateData={updateData}
                                list={cities}
                                name='second'
                                label='شهر'
                            />
                        </div>
                        <div className="w-full flex justify-end">
                            <Button
                                className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
                                onClick={handleClose}
                                variant="contained"
                                color="primary"
                            >
                                تایید و ادامه
                                <ArrowLeftM />
                            </Button>
                        </div>
                    </div>
                </Box>
            </Modal>
        </>
    )
}

export default ModalSearchCity