import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import {
  FormControl, Select, MenuItem, InputLabel, Grid
} from "@mui/material";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";

class PaymentFilters extends Component {
    state = {
        paymentStatus: [
            "Pending",
            "Paid",
            "Partially Paid",
        ],
        theme: createTheme({
            components: {
                MuiMenuItem: {
                    styleOverrides: {
                        root: {
                            marginLeft: "3px",
                            marginRight: "3px",
                            paddingLeft: "10px",
                            paddingRight: "10px",
                            borderRadius: "8px"
                        },
                    },
                },
            },
        }),
    };

    handleDateChange = ( date ) => {
        const { setState, fetchPaymentData, filterStaff, filterService, filterCustomer, filterStatus } = this.props;
        const { pageSize } = this.props.state;
        const value = dayjs( date ).format( "YYYY-MM-DD" );
        setState({ filterDate: value });
        fetchPaymentData(1, pageSize, true, value, filterStaff, filterService, filterCustomer, filterStatus);
    };

    handleStaffChange = ( event ) => {
        const { setState, fetchPaymentData, filterDate, filterService, filterCustomer, filterStatus } = this.props;
        const { pageSize } = this.props.state;
        const { value } = event.target;
        if ( value && "none" != value ) {
            setState({ filterStaff: value });
            fetchPaymentData(1, pageSize, true, filterDate, value, filterService, filterCustomer, filterStatus);
        }
    };
    
    handleServiceChange = ( event ) => {
        const { setState, fetchPaymentData, filterDate, filterStaff, filterCustomer, filterStatus } = this.props;
        const { pageSize } = this.props.state;
        const { value } = event.target;
        if ( value && "none" != value ) {
            setState({ filterService: value });
            fetchPaymentData(1, pageSize, true, filterDate, filterStaff, value, filterCustomer, filterStatus);
        }
    };

    handleCustomerChange = ( event ) => {
        const { setState, fetchPaymentData, filterDate, filterStaff, filterService, filterStatus } = this.props;
        const { pageSize } = this.props.state;
        const { value } = event.target;
        if ( value && "none" != value ) {
            setState({ filterCustomer: value });
            fetchPaymentData(1, pageSize, true, filterDate, filterStaff, filterService, value, filterStatus);
        }
    };

    handleStatusChange = ( event ) => {
        const { setState, fetchPaymentData, filterDate, filterStaff, filterService, filterCustomer } = this.props;
        const { pageSize } = this.props.state;
        const { value } = event.target;
        if ( value && "none" != value ) {
            setState({ filterStatus: value });
            fetchPaymentData(1, pageSize, true, filterDate, filterStaff, filterService, filterCustomer, value);
        }
    };

    render() {

        const { paymentStatus, theme } = this.state;
        const { staffs, services, customers, filterStaff, filterService, filterCustomer, filterStatus, filterDate } = this.props;

        return (
            <ThemeProvider theme={theme}>
                <Grid container sx={{flexWrap:"nowrap", gap:"25px", p:"2em 1em", border:"1px solid #DDEEEE", borderBottom:"none"}}>
                    <Grid item sx={{width:"100%"}}>
                        <InputLabel sx={{fontWeight:600, mb:1}}>{__("Date", "bookify")}</InputLabel>
                        <FormControl sx={{width:"100%", backgroundColor:"#FFFFFF"}}>
                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                <DatePicker
                                    onChange={this.handleDateChange}
                                    sx={{
                                        border: "1px solid #BFD4D4",
                                        borderRadius: "4px",
                                        height: "43px",
                                        width: "100%",
                                        "& .MuiInputBase-root": {
                                            height: "45px",
                                            boxSizing: "border-box",
                                        },
                                        "& fieldset": {
                                            border: "none",
                                        }
                                    }}
                                />
                            </LocalizationProvider>
                        </FormControl>
                    </Grid>
                    <Grid item sx={{width:"100%"}}>
                        <InputLabel sx={{fontWeight:600, mb:1}}>{__("Staffs", "bookify")}</InputLabel>
                        <FormControl sx={{width:"100%", backgroundColor:"#FFFFFF"}}>
                            <Select
                                name="BookifyPaymentStaffFilter"
                                value={filterStaff}
                                onChange={this.handleStaffChange}
                                variant={"outlined"}
                                sx={{
                                    border: "1px solid #BFD4D4",
                                    height: "45px",
                                    "& fieldset": {
                                        border: "none",
                                    },
                                }}
                            >
                            <MenuItem key="filterStaff" value="none">
                                {__("Select Staff", "bookify")}
                            </MenuItem>
                            {staffs.map((value) => (
                                <MenuItem key={value.id} value={value.id}>
                                    {value.staff_name}
                                </MenuItem>
                            ))}
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item sx={{width:"100%"}}>
                        <InputLabel sx={{fontWeight:600, mb:1}}>{__("Services", "bookify")}</InputLabel> 
                        <FormControl sx={{width:"100%", backgroundColor:"#FFFFFF"}}>
                            <Select
                                name="BookifyPaymentServiceFilter"
                                value={filterService}
                                onChange={this.handleServiceChange}
                                variant={"outlined"}
                                sx={{
                                    border: "1px solid #BFD4D4",
                                    height: "45px",
                                    "& fieldset": {
                                        border: "none",
                                    },
                                }}
                            >
                            <MenuItem key="filterService" value="none">
                                {__("Select Service", "bookify")}
                            </MenuItem>
                            {services.map((value) => (
                                <MenuItem key={value.id} value={value.id}>
                                    {value.service_name}
                                </MenuItem>
                            ))}
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item sx={{width:"100%"}}>
                        <InputLabel sx={{fontWeight:600, mb:1}}>{__("Customer", "bookify")}</InputLabel>
                        <FormControl sx={{width:"100%", backgroundColor:"#FFFFFF"}}>
                            <Select
                                name="BookifyPaymentCustomerFilter"
                                value={filterCustomer}
                                onChange={this.handleCustomerChange}
                                variant={"outlined"}
                                sx={{
                                    border: "1px solid #BFD4D4",
                                    height: "45px",
                                    "& fieldset": {
                                        border: "none",
                                    },
                                }}
                            >
                            <MenuItem key="filterCustomer" value="none">
                                {__("Select Customer", "bookify")}
                            </MenuItem>
                            {customers.map((value) => (
                                <MenuItem key={value.id} value={value.id}>
                                    {value.customer_name}
                                </MenuItem>
                            ))}
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item sx={{width:"100%"}}>
                        <InputLabel sx={{fontWeight:600, mb:1}}>{__("Statuses", "bookify")}</InputLabel>
                        <FormControl sx={{width:"100%", backgroundColor:"#FFFFFF"}}>
                            <Select
                                name="BookifyPaymentStatusFilter"
                                value={filterStatus}
                                onChange={this.handleStatusChange}
                                variant={"outlined"}
                                sx={{
                                    border: "1px solid #BFD4D4",
                                    height: "45px",
                                    "& fieldset": {
                                        border: "none",
                                    },
                                }}
                            >
                            <MenuItem key="filterStatus" value="none">
                                {__("Select Status", "bookify")}
                            </MenuItem>
                            {paymentStatus.map((value) => (
                                <MenuItem key={value} value={value}>
                                    {value}
                                </MenuItem>
                            ))}
                            </Select>
                        </FormControl>
                    </Grid>
                </Grid>
            </ThemeProvider>
        );
    }
}

export default PaymentFilters;