// material-ui
import {
    Button,
    Grid, InputLabel, TextField, Typography,
} 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, GENERAL_RED_COLOR} from "../../themes/colorConst";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";
import Autocomplete from "@mui/material/Autocomplete";
import {isOptionEqualToValue} from "../../utils/CommonFunction";
import {useContext, useState} from "react";
import {MONTH_COMBO} from "../../utils/ComboConst";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {GET_APPRECIATION_SUMMARY_REPORT} from "../../utils/ApiPathConst";
import UploadContext from "../../components/UploadProvider";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const SummaryGenerateForm = ({yearComboList}) => {
    const { setIsUploading } = useContext(UploadContext);

    const { handleSubmit } = useForm()
    const [selectedYear , setSelectedYear] = useState(null);
    const [selectedMonth , setSelectedMonth] = useState(null);

    const onSubmit = () => {
        setIsUploading(true);
        axios.get(`${apiPath}${GET_APPRECIATION_SUMMARY_REPORT}`,{
            responseType: 'blob',
            params:{
                year: selectedYear.id,
                month: selectedMonth.id
            }
        })
            .then((response) => {
                if (response.status === 200) {
                    setIsUploading(false);
                    const url = URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement("a");
                    link.href = url;
                    link.setAttribute("download", response.headers.filename);
                    link.click();
                }
            })
            .catch(error => {
                setIsUploading(false);
                console.log(error);
                return false;
            });
    };

    function resetForm(){
        setSelectedYear(null);
        setSelectedMonth(null);
    }

    return (
        <MainCard xs={12} md={12} lg={12}
                  content={false}
                  sx={{width:CARD_MAX_WIDTH}}
        >

            <form onSubmit={handleSubmit(onSubmit)}>
                {/*row 1*/}
                <Grid item justifyContent="space-between" alignItems="center" sx={{mt:2,ml:3,mb:1.5}}>
                    <Typography variant="lionerSubLabel" >
                        Search Criteria(s)
                    </Typography>
                </Grid>

                {/*row 2*/}
                <Grid container alignItems={"center"}>
                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
                        <InputLabel htmlFor="year-combo">
                            Year
                            <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                        </InputLabel>
                        <Autocomplete
                            disablePortal
                            id="year-combo"
                            size="small"
                            value={selectedYear === null? null : selectedYear}
                            options={yearComboList}
                            onChange={(event, newValue) => {
                                setSelectedYear(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                            isOptionEqualToValue={isOptionEqualToValue}
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
                        <InputLabel htmlFor="month-combo">
                            Month
                            <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                        </InputLabel>
                        <Autocomplete
                            disablePortal
                            id="month-combo"
                            size="small"
                            value={selectedMonth === null? null : selectedMonth}
                            options={MONTH_COMBO}
                            onChange={(event, newValue) => {
                                setSelectedMonth(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                            isOptionEqualToValue={isOptionEqualToValue}
                        />
                    </Grid>

                </Grid>

                {/*last row*/}
                <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="export"
                                disabled={
                                    (selectedYear == null || selectedMonth == null)
                                }
                            >
                                Generate
                            </Button>
                        </Grid>

                        <Grid item sx={{ml:{xs:1.5, md:1.5, lg:1.5}, mr:1.5}}>
                            <Button
                                variant="contained"
                                color="cancel"
                                onClick={resetForm}>
                                Clear
                            </Button>
                        </Grid>
                    </ThemeProvider>

                </Grid>
            </form>
        </MainCard>
    );
};

export default SummaryGenerateForm;
