'use client';

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

// Icon
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import ArrowBottomD from "@/components/icons/ArrowBottomD";
import CloseModalD from "@/components/icons/CloseModalD";
import ArrowLeftM from "@/components/icons/ArrowLeftM";
import SettingD from "@/components/icons/SettingD";
import CloseOrangeModal from "@/components/icons/CloseOrangeModal";

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);

    return (
        <>
            {/* Button Modal */}
            <Button
                className="!border-none !min-w-[122px] !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
                onClick={handleOpen}
                variant="contained"
                color="secondary"
            >
                <div className="min-w-[20px] min-h-[20px]">
                    <SettingD />
                </div>
                <p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
                <div className='min-w-[24px]'>
                    <ArrowBottomD />
                </div>
            </Button>
            {/* Content Modal */}
            <Modal
                open={open}
                onClose={handleClose}
            >
                <Box sx={styleDefault}>
                    <div
                        className="flex justify-between w-full"
                    >
                        <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
                        <Button
                            className="cursor-pointer !p-0 flex items-center justify-center gap-1"
                            onClick={handleClose}
                            variant="text"
                        >
                            <CloseOrangeModal />
                            <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
                        </Button>
                    </div>
                    <div className="px-[24px] pb-[24px]">
                        <p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
                        <div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
                            <AutoCompleteSelect
                                list={states}
                                label='استان'
                            />
                            <AutoCompleteSelect
                                list={cities}
                                label='شهر'
                            />
                        </div>
                        <div className="w-full flex justify-end">
                            <Button
                                variant="contained"
                                color="primary"
                                className="flex !px-3 items-center justify-center gap-1 mr-auto"
                            >
                                تایید و ادامه
                                <ArrowLeftM />
                            </Button>
                        </div>
                    </div>
                </Box>
            </Modal>
        </>
    )
}

export default ModalSearchCity