import React, { useState } from "react";
import MenuItem from "@mui/material/MenuItem";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import TextField from "@mui/material/TextField";
import Checkbox from "@mui/material/Checkbox";
import InputAdornment from "@mui/material/InputAdornment";
import SearchIcon from "@mui/icons-material/Search";
import "./MenuOptionsHeader.styles.scss";

export const MenuOptionsHeader = ({
  options,
  selectedItems,
  onSearchChange,
  onSelectAll,
  onClearSelection,
}) => {
  const [menuOption, setMenuOption] = useState("New");
  const [searchQuery, setSearchQuery] = useState("");

  const handleMenuOptionChange = (event) => {
    setMenuOption(event.target.value);
  };

  const handleSearchChange = (event) => {
    setSearchQuery(event.target.value);
    onSearchChange(event.target.value);
  };

  const isAllSelected =
    selectedItems.length === options.length && options.length > 0;
  const isIndeterminate =
    selectedItems.length > 0 && selectedItems.length < options.length;

  return (
    <div className="menu-header">
      <RadioGroup
        row
        name="row-radio-buttons-group"
        value={menuOption}
        onChange={handleMenuOptionChange}
      >
        <FormControlLabel
          value="New"
          control={<Radio size="small" />}
          label="New"
        />
        <FormControlLabel
          value="Existing"
          control={<Radio size="small" />}
          label="Existing"
        />
      </RadioGroup>

      <TextField
        fullWidth
        size="small"
        placeholder="Search here..."
        value={searchQuery}
        onChange={handleSearchChange}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchIcon />
            </InputAdornment>
          ),
        }}
      />

      <MenuItem className="select-all-option">
        <Checkbox
          checked={isAllSelected}
          indeterminate={isIndeterminate}
          onChange={onSelectAll}
        />
        <span className="select-all-text">Select all</span>
        <span className="clear-text" onClick={onClearSelection}>
          Clear
        </span>
      </MenuItem>
    </div>
  );
};
