import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import Stack, { StackProps } from "@mui/material/Stack";
import Iconify from "@/shared/components/iconify";
import { shortDateLabel } from "@/components/custom-date-range-picker";
import { IProjectFilterValue, IProjectFilters } from "@/contexts/types/Project";

// ----------------------------------------------------------------------

type Props = StackProps & {
  filters: IProjectFilters;
  onFilters: (name: string, value: IProjectFilterValue) => void;
  //
  canReset: boolean;
  onResetFilters: VoidFunction;
  //
  results: number;
};

export default function ProjectFiltersResult({
  filters,
  onFilters,
  //
  canReset,
  onResetFilters,
  //
  results,
  ...other
}: Props) {
  const shortLabel = shortDateLabel(filters.startDate, filters.endDate);

  const handleRemoveType = (inputValue: string) => {
    const newValue = filters.type.filter((item) => item !== inputValue);
    onFilters("type", newValue);
  };
  const handleRemoveStatus = (inputValue: string) => {
    const newValue = filters.status;
    onFilters("status", newValue);
  };

  const handleRemoveAvailable = () => {
    onFilters("startDate", null);
    onFilters("endDate", null);
  };

  return (
    <Stack spacing={1.5} {...other}>
      {(!!filters.type.length || (filters.startDate && filters.endDate)) && (
        <Box sx={{ typography: "body2" }}>
          <strong>{results}</strong>
          <Box component="span" sx={{ color: "text.secondary", ml: 0.25 }}>
            results found
          </Box>
        </Box>
      )}

      <Stack
        flexGrow={1}
        spacing={1}
        direction="row"
        flexWrap="wrap"
        alignItems="center"
      >
        {!!filters.type.length && (
          <Block label="Types:">
            {filters.type.map((item) => (
              <Chip
                key={item}
                label={item}
                size="small"
                onDelete={() => handleRemoveType(item)}
              />
            ))}
          </Block>
        )}
        {filters.startDate && filters.endDate && (
          <Block label="Available:">
            <Chip
              size="small"
              label={shortLabel}
              onDelete={handleRemoveAvailable}
            />
          </Block>
        )}

        {canReset &&
          (!!filters.type.length || (filters.startDate && filters.endDate)) && (
            <Button
              color="error"
              onClick={onResetFilters}
              startIcon={<Iconify icon="solar:trash-bin-trash-bold" />}
            >
              Clear
            </Button>
          )}
      </Stack>
    </Stack>
  );
}

// ----------------------------------------------------------------------

type BlockProps = StackProps & {
  label: string;
};

function Block({ label, children, sx, ...other }: BlockProps) {
  return (
    <Stack
      component={Paper}
      variant="outlined"
      spacing={1}
      direction="row"
      sx={{
        p: 1,
        borderRadius: 1,
        overflow: "hidden",
        borderStyle: "dashed",
        ...sx,
      }}
      {...other}
    >
      <Box component="span" sx={{ typography: "subtitle2" }}>
        {label}
      </Box>

      <Stack spacing={1} direction="row" flexWrap="wrap">
        {children}
      </Stack>
    </Stack>
  );
}
