import { Divider, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material";
import React from "react";
import './date-filter.scss';


const optionsData = [
  { label: "Last 24 Hours", value: 1 },
  { label: "Last 48 Hours", value: 2 },
  { label: "Last 72 Hours", value: 3 },
  { label: "Last 7 Days", value: 7 },
  { label: "Last 30 Days", value: 30 },
  { label: "Last 3 Months", value: 90 },
  { label: "Last 6 Months", value: 180 },
  { label: "Last 12 Months", value: 365 },
];


const DateFilter = () => {

  const [selectedRange, setSelectedRange] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setSelectedRange(event.target.value as string);
  };

  return (

    <div className="date-filter-container" >
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label"></InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={selectedRange}
          onChange={handleChange}
          MenuProps={{
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left",
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left",
            },
            className: "select-menu-prop",
        }}
        >
          {optionsData?.map((option) => (
            <MenuItem key={option.label} value={option.value} >
              {option.label}
            </MenuItem>
          ))}
          <Divider></Divider>

          <MenuItem value={'Custom_range'}>Custom Range</MenuItem>
        </Select>
      </FormControl>
    </div>


    // <div className="date-filter-container">
    //   {options?.map((option) => (
    //     <MenuItem key={option.label} value={option.value} >
    //       {option.label}
    //     </MenuItem>
    //   ))}
    //   <Divider></Divider>

    //   <MenuItem value={'Custom_range'}>Custom Range</MenuItem>

    // </div>
  )
}

export default DateFilter