import Button from "@components/Button/Button";
import { Select } from "@components/Select/Select";
import { Close } from "@mui/icons-material";
import {
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    TextField,
} from "@mui/material";
import React from "react";
import { Option } from "../Filter";
import "./manage-filter-popup.scss";

export interface ManageFilterPopupProps {
    id: string;
    keepMounted: boolean;
    value: string;
    open: boolean;
    onClose: () => void;
    filter: Option[];
    onChangeFilter: (index: number) => void;
    onClickOk: (filter: any) => void;
}

const ManageFilterPopup = (props: ManageFilterPopupProps) => {
    const {
        onClose,
        value: valueProp,
        open,
        filter,
        onChangeFilter,
        onClickOk,
        ...other
    } = props;

    const [value, setValue] = React.useState(valueProp);
    const radioGroupRef = React.useRef<HTMLElement>(null);

    const [filters, setFilters] = React.useState<Option[]>(filter);

    const handleCancel = () => {
        onClose();
    };

    const handleOk = () => {
        onClickOk(filters)
        onClose();
    };

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValue((event.target as HTMLInputElement).value);
    };

    const handleTextChange = (index: number, newValue: string) => {
        setFilters((prevItems) =>
            prevItems.map((item, i) =>
                i === index ? { ...item, value: newValue } : item
            )
        );
    };

    const handleRemoveFilter = (index: number) => {
        setFilters((prevItems) => prevItems.filter((_, i) => i !== index));
    };

    const handleScopeChange = (index: any, newValue: { value: any }) => {
        setFilters((prevItems: any[]) =>
            prevItems.map((item: any, i: any) =>
                i === index ? { ...item, selectValue: newValue.value } : item
            )
        );
    };

    React.useEffect(() => {

    }, [filters, filter]);

    return (
        <div className="manage-filter-popup-container">
            <Dialog id={"manage-filter-popup"} open={open}>
                <DialogTitle>Manage Filters</DialogTitle>
                <DialogContent dividers>
                    <div>{`Filters (${filters.length})`}</div>

                    <table className="custom-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Scope</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {filters.map((option, index: number) => (
                                <tr key={index}>
                                    <td>
                                        <TextField
                                            id="outlined-basic"
                                            label=""
                                            variant="outlined"
                                            value={option?.label}
                                            onChange={(e: any) =>
                                                handleTextChange(index, e.target.value)
                                            }
                                        />
                                    </td>
                                    <td>
                                        <Select
                                            value={"private"}
                                            options={[
                                                { label: "Public", value: "public" },
                                                { label: "Private", value: "private" },
                                            ]}
                                            onChange={(option: any) =>
                                                handleScopeChange(index, option)
                                            }
                                        ></Select>
                                    </td>
                                    <td onClick={() => handleRemoveFilter(index)}>
                                        <Close></Close>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </DialogContent>
                <DialogActions>
                    <Button autoFocus label="Cancel" onClick={handleCancel}></Button>
                    <Button label="OK" onClick={handleOk}></Button>
                </DialogActions>
            </Dialog>
        </div>
    );
};

export default ManageFilterPopup;