FPSMS-frontend/src/components/SearchBox/SearchBox.tsx

"use client";

import Grid from "@mui/material/Grid";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import React, { SyntheticEvent, useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import TextField from "@mui/material/TextField";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import CardActions from "@mui/material/CardActions";
import Button from "@mui/material/Button";
import RestartAlt from "@mui/icons-material/RestartAlt";
import Search from "@mui/icons-material/Search";
import dayjs from "dayjs";
import "dayjs/locale/zh-hk";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import {
  Autocomplete,
  Box,
  Checkbox,
  Chip,
  ListSubheader,
} from "@mui/material";
import MultiSelect from "@/components/SearchBox/MultiSelect";
import { intersectionWith } from "lodash";

interface BaseCriterion<T extends string> {
  label: string;
  label2?: string;
  paramName: T;
  paramName2?: T;
  // options?: T[] | string[];
  filterObj?: T;
  handleSelectionChange?: (selectedOptions: T[]) => void;
}

interface OptionWithLabel<T extends string> {
  label: string;
  value: any;
}

interface TextCriterion<T extends string> extends BaseCriterion<T> {
  type: "text";
}

interface SelectCriterion<T extends string> extends BaseCriterion<T> {
  type: "select";
  options: string[];
}

interface SelectWithLabelCriterion<T extends string> extends BaseCriterion<T> {
  type: "select-labelled";
  options: OptionWithLabel<T>[];
}

interface MultiSelectCriterion<T extends string> extends BaseCriterion<T> {
  type: "multi-select";
  options: T[];
  selectedOptions: T[];
  handleSelectionChange: (selectedOptions: T[]) => void;
}

interface AutocompleteOptions {
  value: string | number;
  label: string;
  group?: string;
}

interface AutocompleteCriterion<T extends string> extends BaseCriterion<T> {
  type: "autocomplete";
  options: AutocompleteOptions[];
  multiple?: boolean;
  noOptionsText?: string;
  needAll?: boolean;
}

interface DateRangeCriterion<T extends string> extends BaseCriterion<T> {
  type: "dateRange";
}

interface DateCriterion<T extends string> extends BaseCriterion<T> {
  type: "date";
}

export type Criterion<T extends string> =
  | TextCriterion<T>
  | SelectCriterion<T>
  | SelectWithLabelCriterion<T>
  | DateRangeCriterion<T>
  | DateCriterion<T>
  | MultiSelectCriterion<T>
  | AutocompleteCriterion<T>;

interface Props<T extends string> {
  criteria: Criterion<T>[];
  // TODO: may need to check the type is "autocomplete" and "multiple" = true, then allow string[].
  // TODO: may need to check the type is "dateRange", then add T and `${T}To` in the same time.
  // onSearch: (inputs: Record<T | (Criterion<T>["type"] extends "dateRange" ? `${T}To` : never), string>) => void;
  onSearch: (inputs: Record<T | `${T}To`, string>) => void;
  onReset?: () => void;
}

function SearchBox<T extends string>({
  criteria,
  onSearch,
  onReset,
}: Props<T>) {
  const { t } = useTranslation("common");
  const defaultAll: AutocompleteOptions = {
    value: "All",
    label: t("All"),
    group: t("All"),
  };
  const defaultInputs = useMemo(
    () =>
      criteria.reduce<Record<T | `${T}To`, string>>(
        (acc, c) => {
          let tempCriteria = {
            ...acc,
            [c.paramName]:
              c.type === "select" ||
              c.type === "select-labelled" ||
              (c.type === "autocomplete" && !Boolean(c.multiple))
                ? "All"
                : c.type === "autocomplete" && Boolean(c.multiple)
                  ? [defaultAll.value]
                  : "",
          };

          if (c.type === "dateRange") {
            tempCriteria = {
              ...tempCriteria,
              [c.paramName]: "",
              [`${c.paramName}To`]: "",
            };
          }

          return tempCriteria;
        },
        {} as Record<T | `${T}To`, string>,
      ),
    [criteria],
  );
  const [inputs, setInputs] = useState(defaultInputs);
  const [isReset, setIsReset] = useState(false);

  const makeInputChangeHandler = useCallback(
    (paramName: T): React.ChangeEventHandler<HTMLInputElement> => {
      return (e) => {
        setInputs((i) => ({ ...i, [paramName]: e.target.value }));
      };
    },
    [],
  );

  const makeSelectChangeHandler = useCallback((paramName: T) => {
    return (e: SelectChangeEvent) => {
      setInputs((i) => ({ ...i, [paramName]: e.target.value }));
    };
  }, []);

  const makeAutocompleteChangeHandler = useCallback(
    (paramName: T, multiple: boolean) => {
      return (
        e: SyntheticEvent,
        newValue: AutocompleteOptions | AutocompleteOptions[],
      ) => {
        if (multiple) {
          const multiNewValue = newValue as AutocompleteOptions[];
          setInputs((i) => ({
            ...i,
            [paramName]: multiNewValue.map(({ value }) => value),
          }));
        } else {
          const singleNewValue = newValue as AutocompleteOptions;
          setInputs((i) => ({ ...i, [paramName]: singleNewValue.value }));
        }
      };
    },
    [],
  );

  const makeDateChangeHandler = useCallback((paramName: T) => {
    return (e: any) => {
      setInputs((i) => ({ ...i, [paramName]: dayjs(e).format("YYYY-MM-DD") }));
    };
  }, []);

  const makeDateToChangeHandler = useCallback((paramName: T) => {
    return (e: any) => {
      setInputs((i) => ({
        ...i,
        [paramName + "To"]: dayjs(e).format("YYYY-MM-DD"),
      }));
    };
  }, []);

  const handleReset = () => {
    setInputs(defaultInputs);
    onReset?.();
    setIsReset(!isReset);
  };

  const handleSearch = () => {
    onSearch(inputs);
  };

  return (
    <Card>
      <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
        <Typography variant="overline">{t("Search Criteria")}</Typography>
        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
          {criteria.map((c) => {
            return (
              <Grid key={c.paramName} item xs={6}>
                {c.type === "text" && (
                  <TextField
                    label={t(c.label)}
                    fullWidth
                    onChange={makeInputChangeHandler(c.paramName)}
                    value={inputs[c.paramName]}
                  />
                )}
                {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
                {/* {c.type === "multi-select" && (
                  <MultiSelect
                    label={t(c.label)}
                    options={c?.options}
                    selectedValues={c.filterObj?.[c.paramName] ?? []}
                    onChange={c.handleSelectionChange}
                    isReset={isReset}
                  />
                )} */}
                {c.type === "select" && (
                  <FormControl fullWidth>
                    <InputLabel>{t(c.label)}</InputLabel>
                    <Select
                      label={t(c.label)}
                      onChange={makeSelectChangeHandler(c.paramName)}
                      value={inputs[c.paramName]}
                    >
                      <MenuItem value={"All"}>{t("All")}</MenuItem>
                      {c.options.map((option) => (
                        <MenuItem key={option} value={option}>
                          {option}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                )}
                {c.type === "select-labelled" && (
                  <FormControl fullWidth>
                    <InputLabel>{t(c.label)}</InputLabel>
                    <Select
                      label={t(c.label)}
                      onChange={makeSelectChangeHandler(c.paramName)}
                      value={inputs[c.paramName]}
                    >
                      <MenuItem value={"All"}>{t("All")}</MenuItem>
                      {c.options.map((option) => (
                        <MenuItem key={option.value} value={option.value}>
                          {option.label}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                )}
                {c.type === "autocomplete" && (
                  <Autocomplete
                    groupBy={
                      c.options.filter((option) => option.group !== "All")
                        .length > 0 && c.options.every((option) => option.group)
                        ? (option) =>
                            option.group && option.group.trim() !== ""
                              ? option.group
                              : "Ungrouped"
                        : undefined
                    }
                    multiple={Boolean(c.multiple)}
                    noOptionsText={c.noOptionsText ?? t("No options")}
                    disableClearable
                    fullWidth
                    value={
                      c.multiple
                        ? intersectionWith(
                            [defaultAll, ...c.options],
                            inputs[c.paramName],
                            (option, v) => {
                              return option.value === (v ?? "");
                            },
                          )
                        : c.options.find(
                            (option) => option.value === inputs[c.paramName],
                          ) ?? defaultAll
                    }
                    onChange={makeAutocompleteChangeHandler(
                      c.paramName,
                      Boolean(c.multiple),
                    )}
                    getOptionLabel={(option) => option.label}
                    options={[defaultAll, ...c.options]}
                    disableCloseOnSelect={Boolean(c.multiple)}
                    renderGroup={
                      c.options.every((option) => option.group)
                        ? (params) => (
                            <React.Fragment
                              key={`${params.key}-${params.group}`}
                            >
                              <ListSubheader>{params.group}</ListSubheader>
                              {params.children}
                            </React.Fragment>
                          )
                        : undefined
                    }
                    renderTags={
                      c.multiple
                        ? (value, getTagProps) =>
                            value.map((option, index) => {
                              // eslint-disable-next-line @typescript-eslint/no-unused-vars
                              const { key, ...chipProps } = getTagProps({
                                index,
                              });
                              return (
                                <Chip
                                  {...chipProps}
                                  key={`${option.value}-${option.label}`}
                                  label={option.label}
                                />
                              );
                            })
                        : undefined
                    }
                    renderOption={(
                      params: React.HTMLAttributes<HTMLLIElement> & {
                        key?: React.Key;
                      },
                      option,
                      { selected },
                    ) => {
                      // eslint-disable-next-line @typescript-eslint/no-unused-vars
                      const { key, ...rest } = params;
                      return (
                        <MenuItem
                          {...rest}
                          disableRipple
                          value={option.value}
                          key={`${option.value}--${option.label}`}
                        >
                          {c.multiple && (
                            <Checkbox
                              disableRipple
                              key={`checkbox-${option.value}`}
                              checked={selected}
                              sx={{ transform: "translate(0)" }}
                            />
                          )}
                          {option.label}
                        </MenuItem>
                      );
                    }}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        variant="outlined"
                        label={t(c.label)}
                      />
                    )}
                  />
                )}
                {c.type === "dateRange" && (
                  <LocalizationProvider
                    dateAdapter={AdapterDayjs}
                    // TODO: Should maybe use a custom adapterLocale here to support YYYY-MM-DD
                    adapterLocale="zh-hk"
                  >
                    <Box display="flex">
                      <FormControl fullWidth>
                        <DatePicker
                          label={t(c.label)}
                          onChange={makeDateChangeHandler(c.paramName)}
                          value={
                            dayjs(inputs[c.paramName]).isValid()
                              ? dayjs(inputs[c.paramName])
                              : null
                          }
                        />
                      </FormControl>
                      <Box
                        display="flex"
                        alignItems="center"
                        justifyContent="center"
                        marginInline={2}
                      >
                        {"-"}
                      </Box>
                      <FormControl fullWidth>
                        <DatePicker
                          label={c.label2 ? t(c.label2) : null}
                          onChange={makeDateToChangeHandler(c.paramName)}
                          value={
                            dayjs(inputs[`${c.paramName}To`]).isValid()
                              ? dayjs(inputs[`${c.paramName}To`])
                              : null
                          }
                        />
                      </FormControl>
                    </Box>
                  </LocalizationProvider>
                )}
                {c.type === "date" && (
                  <LocalizationProvider
                    dateAdapter={AdapterDayjs}
                    // TODO: Should maybe use a custom adapterLocale here to support YYYY-MM-DD
                    adapterLocale="zh-hk"
                  >
                    <Box display="flex">
                      <FormControl fullWidth>
                        <DatePicker
                          label={t(c.label)}
                          onChange={makeDateChangeHandler(c.paramName)}
                        />
                      </FormControl>
                    </Box>
                  </LocalizationProvider>
                )}
              </Grid>
            );
          })}
        </Grid>
        <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button
            variant="text"
            startIcon={<RestartAlt />}
            onClick={handleReset}
          >
            {t("Reset")}
          </Button>
          <Button
            variant="outlined"
            startIcon={<Search />}
            onClick={handleSearch}
          >
            {t("Search")}
          </Button>
        </CardActions>
      </CardContent>
    </Card>
  );
}

export default SearchBox;