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


export interface SaveFilterPopupProps {
    id: string;
    value: string;
    open: boolean;
    onClose: () => void;
    onSave: (filter: Option) => void;

}


const SaveFilterPopup = (props: SaveFilterPopupProps) => {

    const {
        onClose,
        value: valueProp,
        open,
        onSave,
        ...other
    } = props;

    const [name, setName] = React.useState<string>('');
    const [scope, setScope] = React.useState<string>('');

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

    const handleOk = () => {
        const newFilter = { label: name, value: name, scope: scope }
        onSave(newFilter);
        onClose();
    };

    const handleScopeChange = (newValue: string) => {
        setScope(newValue);
    };

    const handleNameChange = (newValue: string) => {
        setName(newValue)
    };


    return (
        <div className="save-filter-popup-container">
            <Dialog id={"save-filter-popup"} open={open}>
                <DialogTitle>New Filter</DialogTitle>
                <DialogContent dividers>

                    <div>
                        <div className='info'>This will save the current values into a new filter.</div>

                        <div className='field'>
                            <div className='label'>Name *</div>
                            <div className='value'> <TextField onChange={(e: any) => handleNameChange(e.target.value)
                            }></TextField></div>

                        </div>

                        <div className='field'>
                            <div className='label'>Scope *</div>
                            <div className='value'><Select
                                value={"private"}
                                options={[
                                    { label: "Public", value: "public" },
                                    { label: "Private", value: "private" },
                                ]}
                                onChange={(option: any) =>
                                    handleScopeChange(option)
                                }
                            ></Select></div>
                        </div>

                    </div>

                </DialogContent>
                <DialogActions>
                    <Button autoFocus label="Cancel" onClick={handleCancel}></Button>
                    <Button label="OK" onClick={handleOk}></Button>
                </DialogActions>
            </Dialog>
        </div>
    )
}

export default SaveFilterPopup