Untitled

import {
    Button,
    Checkbox,
    Col,
    Collapse,
    DatePicker,
    Flex,
    Form,
    Input,
    Radio,
    Row,
    Select,
    Space,
    Tooltip,
} from "antd"
import { DeleteOutlined, MinusOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons"
import {
    MucDichGiao,
    LyDoTang,
    HienTrang,
    HienTrangSDNhaDat,
    NguonGocTaiSan,
    XaPhuong,
    QuanHuyen,
    TinhThanh,
    NhanHieu,
    NuocSanXuat,
    NhaCungCap,
} from "@/components/Atoms/Select"
import InputNumberCustom from "@/components/Commons/InputNumberCustom"
import { useState } from "react"
import { generateRandomKey } from "@/utils/helpers"

const itemProps = { mode: "multiple", className: "w-100", showAll: true, size: "middle", maxTagCount: "responsive" }
const responsive = { xs: 24, sm: 12, md: 4, lg: 4, xl: 6, xxl: 4 }

export default function AdvancedFiltersTraCuu({
    loaiTSUseWatch = "",
    form = "",
    setParameters = [],
}) {
    const allTinhValues = Form.useWatch([], form)
    const [rows, setRows] = useState([{ id: generateRandomKey(), tinh: "", huyen: "", xa: "" }])
    const [radioValue, setRadioValue] = useState({})
    const [visible, setVisible] = useState({
        Nguon_NS: false,
        Quy: false,
        Nguon_Khac: false,
        Nguon_Vien_Tro: false,
        Nguon_Du_An: false,
    })

    const [checked, setChecked] = useState({
        Nguon_NS: true,
        Quy: false,
        Nguon_Khac: false,
        Nguon_Vien_Tro: false,
        Nguon_Du_An: false,
        Tong: false,
    })

    const allKeys = ["Nguon_NS", "Quy", "Nguon_Khac", "Nguon_Vien_Tro", "Nguon_Du_An", "Tong"]
    const sources = [
        { name: "Nguon_NS", label: "Nguồn ngân sách" },
        { name: "Quy", label: "Quỹ phát triển HĐSN" },
        { name: "Nguon_Vien_Tro", label: "Nguồn viện trợ" },
        { name: "Nguon_Du_An", label: "Nguồn dự án" },
        { name: "Nguon_Khac", label: "Nguồn khác" },
        { name: "Tong", label: "Tổng giá trị" },
    ]

    const isAllChecked = allKeys.every((key) => checked[key])
    const isIndeterminate = allKeys.some((key) => checked[key]) && !isAllChecked

    const inCludesLoaiTS = (value) => {
        return [value].includes(loaiTSUseWatch?.value)
    }

    const addRow = () => {
        setRows((prevRows) => [...prevRows, { id: generateRandomKey(), tinh: "", huyen: "", xa: "" }])
    }

    const deleteRow = (id) => {
        const remainingRows = rows.filter((row) => row.id !== id)
        setRows(remainingRows)

        const deletedRow = rows.find((row) => row.id === id)
        if (deletedRow && (deletedRow.tinh || deletedRow.huyen || deletedRow.xa)) {
            const getIncludes = (array, key) => {
                return [...new Set(array.map((item) => item[key]).filter((value) => value !== ""))].join(", ")
            }

            const formatAddress = {
                Tinh_Thanh: getIncludes(remainingRows, "tinh"),
                Quan_Huyen: getIncludes(remainingRows, "huyen"),
                Phuong_Xa: getIncludes(remainingRows, "xa"),
            }

            setParameters((prevParams) => ({
                ...prevParams,
                ...formatAddress,
            }))
        }
    }

    const handleChange = (value, field, id) => {
        setRows((prevRows) => prevRows.map((row) => (row.id === id ? { ...row, [field]: value } : row)))
    }

    const handleCheckAll = (e) => {
        const checkedAll = e.target.checked
        const newChecked = {}
        allKeys.forEach((key) => {
            newChecked[key] = checkedAll
        })
        setChecked(newChecked)
    }

    const handleCheckboxChange = (key) => {
        setChecked((prev) => {
            const isChecked = !prev[key]

            const updatedParams = {
                [`${key}_Tu`]: "",
                [`${key}_Den`]: "",
            }

            if (!isChecked) {
                setParameters((prevParams) => ({
                    ...prevParams,
                    ...updatedParams,
                }))
                form.setFieldsValue(updatedParams)
            }

            return {
                ...prev,
                [key]: isChecked,
            }
        })
    }

    const renderMaxTagPlaceholder = (omittedValues) => (
        <Tooltip
            styles={{
                root: {
                    pointerEvents: "none",
                },
            }}
            title={omittedValues.map(({ label }) => label).join(", ")}
        >
            <span>+ {omittedValues.length}</span>
        </Tooltip>
    )

    
    const SourceSection = ({ source, visible, setVisible }) => {
        // // Định nghĩa các options
        const allOptions = [
            { value: 100000000, label: "Dưới 100 triệu" },
            { value: 200000000, label: "Dưới 200 triệu" },
            { value: 300000000, label: "Dưới 300 triệu" },
            { value: 400000000, label: "Dưới 400 triệu" },
            { value: 600000000, label: "Trên 600 triệu" },
            { value: 700000000, label: "Trên 700 triệu" },
            { value: 800000000, label: "Trên 800 triệu" },
            { value: 900000000, label: "Trên 900 triệu" },
            { value: 1000000000, label: "Trên 1 tỷ" },
        ]
        console.log(source.name);
        // Lọc options theo giá trị của source.name
        const filteredOptions =
            radioValue?.name === source?.name && radioValue?.value === 1
                ? allOptions.filter((option) => option.value <= 400000000)
                : allOptions.filter((option) => option.value > 400000000)

        return (
            <Col xs={24} sm={12} md={7} lg={6} xl={6} xxl={5}>
                <Row gutter={8}>
                    <Col span={20}>
                        <Form.Item label={source.label} name={source.name}>
                            <Radio.Group>
                                <Radio value={1}>Dưới 500tr</Radio>
                                <Radio value={2}>Trên 500tr</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Flex justify="flex-end">
                            <Tooltip title="Nhập giá trị">
                                <Button
                                    className="mt-4"
                                    color="default"
                                    variant="filled"
                                    icon={visible[source.name] ? <MinusOutlined /> : <PlusOutlined />}
                                    onClick={() =>
                                        setVisible((prev) => ({
                                            ...prev,
                                            [source.name]: !visible[source.name],
                                        }))
                                    }
                                />
                            </Tooltip>
                        </Flex>
                    </Col>
                </Row>
                {visible[source.name] && (
                    <Row gutter={8} className="mt-1">
                        <Col span={24}>
                            {/* <Form.Item name={`${source.name}_select`}>
                                <Select placeholder="Chọn giá trị" className="w-100" options={filteredOptions} />
                            </Form.Item> */}
                        </Col>
                    </Row>
                )}
            </Col>
        )
    }

    const FilterSection = ({ checked, handleCheckboxChange }) => (
        <div className="d-flex align-items-center">
            <div>Nguồn vốn: </div>
            <Checkbox className="ms-2" indeterminate={isIndeterminate} checked={isAllChecked} onChange={handleCheckAll}>
                Tất cả
            </Checkbox>
            {sources.map((source) => (
                <Checkbox
                    key={source.name}
                    className="ms-2"
                    checked={checked[source.name]}
                    onChange={() => handleCheckboxChange(source.name)}
                >
                    {source.label}
                </Checkbox>
            ))}
        </div>
    )


    const items = [
        {
            key: "1",
            label: (
                <div className="d-flex align-items-center">
                    Lọc theo loại TS :{" "}
                    {loaiTSUseWatch?.label ? (
                        loaiTSUseWatch.label
                    ) : (
                        <div className="text-muted mx-1"> Chọn loại tài sản để tối ưu bộ lọc.</div>
                    )}
                </div>
            ),
            children: (
                <Row gutter={[8, 8]}>
                    <Col {...responsive}>
                        <Form.Item label="Nguồn gốc tài sản" name="Nguon_Goc_TS">
                            <NguonGocTaiSan {...itemProps} renderMaxTagPlaceholder={renderMaxTagPlaceholder} />
                        </Form.Item>
                    </Col>
                    <Col {...responsive}>
                        <Form.Item label="Mục đích giao" name="Muc_Dich_Giao">
                            <MucDichGiao
                                {...itemProps}
                                renderMaxTagPlaceholder={renderMaxTagPlaceholder}
                                loai={loaiTSUseWatch?.value === 1 ? 1 : loaiTSUseWatch?.value === 2 ? 2 : 3}
                            />
                        </Form.Item>
                    </Col>
                    {loaiTSUseWatch && (
                        <Col {...responsive}>
                            <Form.Item label="Lý do tăng" name="Ly_Do_Tang">
                                <LyDoTang
                                    {...itemProps}
                                    renderMaxTagPlaceholder={renderMaxTagPlaceholder}
                                    loai={loaiTSUseWatch?.value === 1 ? 1 : loaiTSUseWatch?.value === 2 ? 2 : 3}
                                />
                            </Form.Item>
                        </Col>
                    )}

                    {loaiTSUseWatch && !inCludesLoaiTS(1, 2) && (
                        <Col {...responsive}>
                            <Form.Item label="Hiện trạng SD" name="Hien_Trang_SD">
                                <HienTrang {...itemProps} renderMaxTagPlaceholder={renderMaxTagPlaceholder} />
                            </Form.Item>
                        </Col>
                    )}
                    {loaiTSUseWatch && inCludesLoaiTS(1, 2) && (
                        <Col {...responsive}>
                            <Form.Item label="Hiện trạng SD nhà đất" name="Hien_Trang_SD_Nha_Dat">
                                <HienTrangSDNhaDat {...itemProps} renderMaxTagPlaceholder={renderMaxTagPlaceholder} />
                            </Form.Item>
                        </Col>
                    )}
                    {loaiTSUseWatch && !inCludesLoaiTS(1, 2, 7) && (
                        <>
                            <Col {...responsive}>
                                <Form.Item label="Nhãn hiệu" name="Nhan_Hieu">
                                    <NhanHieu {...itemProps} renderMaxTagPlaceholder={renderMaxTagPlaceholder} />
                                </Form.Item>
                            </Col>
                            <Col {...responsive}>
                                <Form.Item label="Nước sản xuất" name="Nuoc_SX">
                                    <NuocSanXuat {...itemProps} renderMaxTagPlaceholder={renderMaxTagPlaceholder} />
                                </Form.Item>
                            </Col>
                            <Col {...responsive}>
                                <Form.Item label="Năm sản xuất" name="Nam_SX">
                                    <DatePicker placeholder="Chọn năm" className="w-100" picker="year" format="YYYY" />
                                </Form.Item>
                            </Col>
                            <Col {...responsive}>
                                <Form.Item label="Nhà cung cấp" name="NCC_ID">
                                    <NhaCungCap {...itemProps} renderMaxTagPlaceholder={renderMaxTagPlaceholder} />
                                </Form.Item>
                            </Col>
                        </>
                    )}
                    {loaiTSUseWatch && loaiTSUseWatch?.value === 3 && (
                        <>
                            <Col {...responsive}>
                                <Form.Item label="Biển kiểm soát" name="Bien_Kiem_Soat">
                                    <Input placeholder="Nhập biển kiểm soát" suffix={<SearchOutlined />} />
                                </Form.Item>
                            </Col>
                            <Col {...responsive}>
                                <Form.Item label="Số máy" name="So_May">
                                    <Input placeholder="Nhập số máy" suffix={<SearchOutlined />} />
                                </Form.Item>
                            </Col>
                            <Col {...responsive}>
                                <Form.Item label="Số khung" name="So_Khung">
                                    <Input placeholder="Nhập số khung" suffix={<SearchOutlined />} />
                                </Form.Item>
                            </Col>
                            <Col {...responsive}>
                                <Form.Item label="Số chỗ ngồi" name="So_Cho_Ngoi">
                                    <InputNumberCustom placeholder="Nhập số chỗ ngồi" suffix={<SearchOutlined />} />
                                </Form.Item>
                            </Col>
                            <Col {...responsive}>
                                <Form.Item label="Tải trọng" name="Tai_Trong">
                                    <Input placeholder="Nhập tải trọng" suffix={<SearchOutlined />} />
                                </Form.Item>
                            </Col>
                        </>
                    )}
                </Row>
            ),
        },
        {
            key: "2",
            label: (
                <div>
                    Lọc theo giá trị{" "}
                    <span className="text-muted" style={{ fontSize: 12 }}>
                        (VNĐ)
                    </span>
                    :
                </div>
            ),
            extra: (
                <FilterSection
                    checked={checked}
                    visible={visible}
                    handleCheckboxChange={handleCheckboxChange}
                    setVisible={setVisible}
                />
            ),
            children: (
                <Row gutter={[8, 8]} className="mt-1">
                    {sources.map((source) =>
                        checked[source.name] ? (
                            <SourceSection
                                key={source.name}
                                source={source}
                                checked={checked}
                                visible={visible}
                                handleCheckboxChange={handleCheckboxChange}
                                setVisible={setVisible}
                            />
                        ) : null,
                    )}
                </Row>
            ),
        },
        loaiTSUseWatch.value === 1 && {
            key: "3",
            label: <div>Lọc theo tỉnh, huyện, xã </div>,
            children: rows.map((row) => {
                const tinhValue = allTinhValues?.[`Tinh_Thanh_${row.id}`]
                const huyenValue = allTinhValues?.[`Quan_Huyen_${row.id}`]
                return (
                    <Row gutter={8} key={row.id} className="mb-3">
                        <Col span={22}>
                            <Row gutter={8}>
                                <Col span={8}>
                                    <Form.Item label="Tỉnh" name={`Tinh_Thanh_${row.id}`}>
                                        <TinhThanh
                                            className="w-100"
                                            size="middle"
                                            value={row.tinh}
                                            onChange={(value) => {
                                                handleChange(value, "tinh", row.id)
                                                form.setFieldValue(`Tinh_Thanh_${row.id}`, value)
                                                form.setFieldValue(`Quan_Huyen_${row.id}`, 0)
                                                form.setFieldValue(`Phuong_Xa_${row.id}`, 0)
                                            }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item label="Huyện" name={`Quan_Huyen_${row.id}`}>
                                        <QuanHuyen
                                            className="w-100"
                                            size="middle"
                                            province={tinhValue}
                                            value={row.huyen}
                                            onChange={(value) => {
                                                handleChange(value, "huyen", row.id)
                                                form.setFieldValue(`Quan_Huyen_${row.id}`, value)
                                                form.setFieldValue(`Phuong_Xa_${row.id}`, 0)
                                            }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item label="Xã" name={`Phuong_Xa_${row.id}`}>
                                        <XaPhuong
                                            className="w-100"
                                            size="middle"
                                            district={huyenValue}
                                            value={row.xa}
                                            onChange={(value) => {
                                                handleChange(value, "xa", row.id)
                                                form.setFieldValue(`Phuong_Xa_${row.id}`, value)
                                            }}
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={2}>
                            <Flex justify="center">
                                <Space className="mt-4">
                                    <Button color="primary" variant="filled" icon={<PlusOutlined />} onClick={addRow} />
                                    {rows.length > 1 && (
                                        <Button
                                            color="danger"
                                            variant="filled"
                                            icon={<DeleteOutlined />}
                                            onClick={() => deleteRow(row.id)}
                                        />
                                    )}
                                </Space>
                            </Flex>
                        </Col>
                    </Row>
                )
            }),
        },
    ].filter(Boolean)

    return (
        <div className="px-3 mt-2">
            <div className="bg-white rounded-lg">
                <Collapse defaultActiveKey={["1", "2", "3"]} collapsible="header" items={items} />
            </div>
        </div>
    )
}