import React, { ReactNode, RefObject } from "react";
import classNames from "classnames";
import { bemHOF } from "../../utilities/bem";
import { Heading } from "../Heading";
import { DateRangePickerPreset, DateRangePickerValue } from "./types";

export const cn = bemHOF("DateRangePicker");

interface DateRangePickerPresetProps {
  isSelected: boolean;
  children: ReactNode;
  onClick: () => void;
}

export const RangePickerPreset = ({
  isSelected,
  children,
  onClick,
}: DateRangePickerPresetProps) => {
  const classes = classNames(
    cn({ e: "preset" }),
    isSelected && cn({ e: "preset", m: "isSelected" }),
  );
  return (
    <button type="button" className={classes} onClick={onClick}>
      <Heading.H4>{children}</Heading.H4>
    </button>
  );
};

export const DATE_RANGE_PICKER_CUSTOM_PRESET = "Custom range";

export const getMatchingDateRangePickerPreset = (
  value: DateRangePickerValue,
  presets: DateRangePickerPreset[],
) => {
  if (!value || !("name" in value)) return null;
  return presets.find((p) => p.name === value.name);
};

export const dateRangePickerFocusInput = (ref: RefObject<HTMLInputElement>) => {
  const input = ref.current;
  const { activeElement } = document;
  if (input && input !== activeElement) {
    input.focus();
  }
};