import React from "react";

import { useTheme } from "@mui/material/styles";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import useMediaQuery from "@mui/material/useMediaQuery";

import { ShipmentDestinationType } from "../types/shipment";

import { ShipmentDestinationIcon } from "./ShipmentDestinationIcon";

export const ALL_SELECTED: ShipmentDestinationType[] = ["HOME", "LOCKER", "SERVICE_POINT", "STORE"];

export interface ShipmentDestinationButtonsProps {
  defaultSelected?: ShipmentDestinationType[];
  onChange?: (selected: ShipmentDestinationType[]) => void;
}

export const ShipmentDestinationButtons: React.FC<ShipmentDestinationButtonsProps> = ({
  defaultSelected,
  onChange,
}) => {
  const theme = useTheme();
  const orientation = useMediaQuery(theme.breakpoints.down("md")) ? "vertical" : "horizontal";

  const [selectedValues, setSelectedValues] = React.useState<(ShipmentDestinationType | "ALL")[]>(
    defaultSelected != undefined && !ALL_SELECTED.every((type) => defaultSelected.includes(type))
      ? defaultSelected
      : [...ALL_SELECTED, "ALL"],
  );

  const handleSelect = (
    _: React.MouseEvent<HTMLElement, MouseEvent>,
    selected: (ShipmentDestinationType | "ALL")[],
  ) => {
    const allAreSelected = ALL_SELECTED.every((type) => selected.includes(type));
    const allWereSelected = selectedValues.includes("ALL");
    const allIsSelected = selected.includes("ALL");

    // If all shipment types are selected, enable the all button
    if (allAreSelected && !allIsSelected) {
      selected.push("ALL");
    }

    if (!allAreSelected && allIsSelected) {
      // If all shipment types were selected and a button was clicked, disable that button and the all button, otherwise select all
      if (allWereSelected) {
        selected = selected.filter((type) => type !== "ALL");
      } else {
        selected = [...ALL_SELECTED, "ALL"];
      }
    }

    // If all shipment types were selected but the all button was deselected, deselect all
    if (allWereSelected && !allIsSelected) {
      selected = [];
    }

    setSelectedValues(selected);
    onChange?.(selected.filter((type) => type !== "ALL") as ShipmentDestinationType[]);
  };

  return (
    <ToggleButtonGroup
      fullWidth
      color="secondary"
      orientation={orientation}
      size="small"
      sx={{
        "& .MuiToggleButton-root": {
          gap: theme.spacing(1),
        },
      }}
      value={selectedValues}
      onChange={handleSelect}
    >
      <ToggleButton value="HOME">
        <ShipmentDestinationIcon type="HOME" />
        Home delivery
      </ToggleButton>
      <ToggleButton value="STORE">
        <ShipmentDestinationIcon type="STORE" />
        Collect at store
      </ToggleButton>
      <ToggleButton value="SERVICE_POINT">
        <ShipmentDestinationIcon type="SERVICE_POINT" />
        Service point
      </ToggleButton>
      <ToggleButton value="LOCKER">
        <ShipmentDestinationIcon type="LOCKER" />
        Locker
      </ToggleButton>
      <ToggleButton value="ALL">All</ToggleButton>
    </ToggleButtonGroup>
  );
};