import React from 'react';
import styled from 'styled-components';

import type { FilterProps } from '@redocly/theme/core/types';

import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
import { FilterTitle } from '@redocly/theme/components/Filter/FilterTitle';
import { DatePicker } from '@redocly/theme/components/DatePicker/DatePicker';
import { useThemeHooks } from '@redocly/theme/core/hooks';
import { formatDateWithoutTimeZone } from '@redocly/theme/core/utils';

export function FilterDateRange({ filter }: FilterProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const from = filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined;
  const to = filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : undefined;

  return (
    <FilterDateRangeWrapper data-component-name="Filter/FilterDateRange">
      <FilterTitle data-translation-key={filter.titleTranslationKey}>
        {translate(filter.titleTranslationKey, filter.title)}
      </FilterTitle>
      <FilterOptions>
        <DateRangeWrapper>
          <DateRangeRow>
            <span>From:</span>
            <DatePicker
              closeCalendar={true}
              format="y-MM-dd"
              dayPlaceholder="DD"
              monthPlaceholder="MM"
              yearPlaceholder="YYYY"
              value={from}
              minDetail="decade"
              maxDate={new Date()}
              onChange={(from) => {
                if (Array.isArray(from)) return;
                filter.selectOption({
                  ...filter.selectedOptions,
                  from: formatDateWithoutTimeZone(from),
                  to: formatDateWithoutTimeZone(to),
                });
              }}
            />
          </DateRangeRow>
          <DateRangeRow>
            <span>To:</span>
            <DatePicker
              closeCalendar={true}
              dayPlaceholder="DD"
              monthPlaceholder="MM"
              yearPlaceholder="YYYY"
              format="y-MM-dd"
              minDate={from}
              value={to}
              minDetail="decade"
              onChange={(to) => {
                if (Array.isArray(to)) return;
                filter.selectOption({
                  ...filter.selectedOptions,
                  from: formatDateWithoutTimeZone(from),
                  to: formatDateWithoutTimeZone(to),
                });
              }}
            />
          </DateRangeRow>
        </DateRangeWrapper>
      </FilterOptions>
    </FilterDateRangeWrapper>
  );
}

const DateRangeWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--filter-options-gap);
`;

const DateRangeRow = styled.div`
  color: var(--filter-date-picker-color);
  display: flex;
  flex-direction: row;

  align-items: center;
  gap: var(--filter-date-picker-gap);

  > span {
    width: var(--filter-date-picker-width);
    color: var(--filter-option-label-color);
  }
`;
const FilterDateRangeWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
`;