import {
    Button,
    Grid,
    InputLabel,
    MenuItem,
    TextField,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import { useForm } from "react-hook-form";
import * as React from "react";
import { ThemeProvider } from "@emotion/react";
import { LIONER_BUTTON_THEME } from "../../themes/colorConst";
import { CARD_MAX_WIDTH } from "../../themes/themeConst";

const FORM_CODES = ['IDA', 'FNA', 'HSBCFIN', 'HSBCA31', 'MLB03S', 'MLFNA_EN', 'MLFNA_CHI', 'SLFNA_EN', 'SLFNA_CHI', 'SLAPP', 'SLGII'];
const SIG_TYPES = ['upload1', 'upload2'];

const FormSigPageSearchForm = ({ applySearch }) => {
    const { reset, register, handleSubmit } = useForm();

    const onSubmit = (data) => {
        applySearch(data);
    };

    return (
        <MainCard
            xs={12}
            md={12}
            lg={12}
            content={false}
            sx={{ width: CARD_MAX_WIDTH }}
        >
            <form onSubmit={handleSubmit(onSubmit)}>
                <Grid sx={{ mb: 2 }} />
                <Grid container alignItems="center" spacing={2}>
                    <Grid item xs={12} sm={6} md={4} lg={3} sx={{ ml: 3, mr: 3 }}>
                        <InputLabel>Form Code</InputLabel>
                        <TextField
                            fullWidth
                            select
                            {...register("formCode")}
                            id="formCode"
                        >
                            <MenuItem value="">All</MenuItem>
                            {FORM_CODES.map((c) => (
                                <MenuItem key={c} value={c}>{c}</MenuItem>
                            ))}
                        </TextField>
                    </Grid>
                    <Grid item xs={12} sm={6} md={4} lg={3}>
                        <InputLabel>Sig Type</InputLabel>
                        <TextField
                            fullWidth
                            select
                            {...register("sigType")}
                            id="sigType"
                        >
                            <MenuItem value="">All</MenuItem>
                            {SIG_TYPES.map((t) => (
                                <MenuItem key={t} value={t}>{t}</MenuItem>
                            ))}
                        </TextField>
                    </Grid>
                </Grid>
                <Grid container maxWidth justifyContent="flex-start" sx={{ mt: 2, mb: 2 }}>
                    <ThemeProvider theme={LIONER_BUTTON_THEME}>
                        <Grid item sx={{ ml: 3, mr: 1.5 }}>
                            <Button variant="contained" type="submit" color="save">
                                Search
                            </Button>
                        </Grid>
                        <Grid item>
                            <Button variant="outlined" type="button" onClick={() => { reset(); applySearch({}); }}>
                                Reset
                            </Button>
                        </Grid>
                    </ThemeProvider>
                </Grid>
            </form>
        </MainCard>
    );
};

export default FormSigPageSearchForm;
