import { Checkbox, Group, Stack, Text } from "@mantine/core";

export type PromoCodeFilterValues = {
  isActive: boolean;
  inactiveOnly?: boolean;
  includeExpired: boolean;
  onlyPromoCodes: boolean;
  memberReferral: boolean;
};


export const EMPTY_PROMO_CODE_FILTERS: PromoCodeFilterValues = {
  isActive: false,
  inactiveOnly: false,
  includeExpired: false,
  onlyPromoCodes: false,
  memberReferral: false,
};


export const DEFAULT_PROMO_CODE_FILTERS: PromoCodeFilterValues = {
  isActive: true,
  inactiveOnly: false,
  includeExpired: false,
  onlyPromoCodes: true,
  memberReferral: false,
};

export const countActivePromoCodeFilters = (v: PromoCodeFilterValues) =>
  (v.isActive ? 1 : 0) +
  (v.inactiveOnly ? 1 : 0) +
  (v.includeExpired ? 1 : 0) +
  (v.onlyPromoCodes ? 1 : 0) +
  (v.memberReferral ? 1 : 0);

interface Props {
  values: PromoCodeFilterValues;
  onChange: (next: PromoCodeFilterValues) => void;
  showTitle?: boolean;
  checkboxColor?: string;
  showInactive?: boolean;
}

export const PromoCodeFilterFields: React.FC<Props> = ({
  values,
  onChange,
  showTitle,
  checkboxColor,
  showInactive,
}) => {
  const set = <K extends keyof PromoCodeFilterValues>(
    key: K,
    next: boolean,
  ) => onChange({ ...values, [key]: next });

  return (
    <Stack gap={6}>
      <Text fw={500} size="sm">
        {showTitle ? "Select Filters" : "Show"}
      </Text>
      <Group gap="lg" wrap="wrap">
        <Checkbox
          color={checkboxColor}
          label="Active"
          checked={values.isActive}
          onChange={(e) =>
            onChange({
              ...values,
              isActive: e.currentTarget.checked,
              inactiveOnly: e.currentTarget.checked ? false : values.inactiveOnly,
            })
          }
        />
        {showInactive && (
          <Checkbox
            color={checkboxColor}
            label="Inactive"
            checked={values.inactiveOnly ?? false}
            onChange={(e) =>
              onChange({
                ...values,
                inactiveOnly: e.currentTarget.checked,
                isActive: e.currentTarget.checked ? false : values.isActive,
              })
            }
          />
        )}
        <Checkbox
          color={checkboxColor}
          label="Include Expired"
          checked={values.includeExpired}
          onChange={(e) => set("includeExpired", e.currentTarget.checked)}
        />
        <Checkbox
          color={checkboxColor}
          label="Only Promo Codes"
          checked={values.onlyPromoCodes}
          onChange={(e) => set("onlyPromoCodes", e.currentTarget.checked)}
        />
        <Checkbox
          color={checkboxColor}
          label="Referral Codes"
          checked={values.memberReferral}
          onChange={(e) => set("memberReferral", e.currentTarget.checked)}
        />
      </Group>
    </Stack>
  );
};