import {useDateRangePickerState} from '@common/ui/forms/input-field/date/date-range-picker/use-date-range-picker-state';
import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
import {Button} from '@common/ui/buttons/button';
import {DateRangeIcon} from '@common/icons/material/DateRange';
import {FormattedDateTimeRange} from '@common/i18n/formatted-date-time-range';
import {DateRangeDialog} from '@common/ui/forms/input-field/date/date-range-picker/dialog/date-range-dialog';
import React from 'react';
import {DateRangeValue} from '@common/ui/forms/input-field/date/date-range-picker/date-range-value';
import {useIsMobileMediaQuery} from '@common/utils/hooks/is-mobile-media-query';
import {DateFormatPresets} from '@common/i18n/formatted-date';
import {DateRangeComparePresets} from '@common/ui/forms/input-field/date/date-range-picker/dialog/date-range-compare-presets';
import {Granularity} from '@common/ui/forms/input-field/date/date-picker/use-date-picker-state';

const monthDayFormat: Intl.DateTimeFormatOptions = {
  month: 'short',
  day: '2-digit',
};

interface ReportDataSelectorProps {
  value: DateRangeValue;
  disabled?: boolean;
  onChange: (value: DateRangeValue) => void;
  compactOnMobile?: boolean;
  enableCompare?: boolean;
  granularity?: Granularity;
}
export function ReportDateSelector({
  value,
  onChange,
  disabled,
  compactOnMobile = true,
  enableCompare = false,
  granularity = 'minute',
}: ReportDataSelectorProps) {
  const isMobile = useIsMobileMediaQuery();
  return (
    <DialogTrigger
      type="popover"
      onClose={value => {
        if (value) {
          onChange(value);
        }
      }}
    >
      <Button
        variant="outline"
        color="chip"
        endIcon={<DateRangeIcon />}
        disabled={disabled}
      >
        <FormattedDateTimeRange
          start={value.start}
          end={value.end}
          options={
            isMobile && compactOnMobile
              ? monthDayFormat
              : DateFormatPresets.short
          }
        />
      </Button>
      <DateSelectorDialog
        value={value}
        enableCompare={enableCompare}
        granularity={granularity}
      />
    </DialogTrigger>
  );
}

interface DateSelectorDialogProps {
  value: DateRangeValue;
  enableCompare: boolean;
  granularity: Granularity;
}
function DateSelectorDialog({
  value,
  enableCompare,
  granularity,
}: DateSelectorDialogProps) {
  const isMobile = useIsMobileMediaQuery();
  const state = useDateRangePickerState({
    granularity,
    defaultValue: {
      start: value.start,
      end: value.end,
      preset: value.preset,
    },
    closeDialogOnSelection: false,
  });
  const compareHasInitialValue = !!value.compareStart && !!value.compareEnd;
  const compareState = useDateRangePickerState({
    granularity,
    defaultValue: compareHasInitialValue
      ? {
          start: value.compareStart,
          end: value.compareEnd,
          preset: value.comparePreset,
        }
      : DateRangeComparePresets[0].getRangeValue(state.selectedValue),
  });
  return (
    <DateRangeDialog
      state={state}
      compareState={enableCompare ? compareState : undefined}
      compareVisibleDefault={compareHasInitialValue}
      showInlineDatePickerField={!isMobile}
    />
  );
}