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

import type { JSX } from 'react';
import type { ResolvedFilter } from '@redocly/theme/core/types';
import type { RedoclyConfig } from '@redocly/theme/config';

import { breakpoints } from '@redocly/theme/core/utils';
import { useThemeHooks } from '@redocly/theme/core/hooks';
import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';

export type FilterPopoverProps = {
  onClose: () => void;
  filters: ResolvedFilter[];
  filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
  filterTerm: string;
  setFilterTerm: (term: string) => void;
};

export function FilterPopover({
  onClose,
  filters,
  filterValuesCasing,
  filterTerm,
  setFilterTerm,
}: FilterPopoverProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  return (
    <FilterPopoverWrapper data-component-name="Filter/FilterPopover">
      <FilterPopoverHeader>
        <FilterPopoverHeaderLabel data-translation-key="catalog.filters.add">
          {translate('catalog.filters.add', 'Add filter')}
        </FilterPopoverHeaderLabel>
        <FilterPopoverHeaderButton onClick={onClose}>
          {translate('catalog.filters.done', 'Done')}
        </FilterPopoverHeaderButton>
      </FilterPopoverHeader>
      <FilterContent
        setFilterTerm={setFilterTerm}
        filters={filters}
        filterTerm={filterTerm}
        filterValuesCasing={filterValuesCasing}
      />
    </FilterPopoverWrapper>
  );
}

const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
  position: absolute;
  top: 0;
  z-index: var(--z-index-popover);
  height: 100vh;
  overflow: auto;
  transition: height 0.2s ease-in-out;
  width: 100%;
  background-color: var(--filter-popover-bg-color);
  display: block;

  @media screen and (min-width: ${breakpoints.medium}) {
    display: none;
  }
`;

const FilterPopoverHeader = styled.div`
  height: var(--navbar-height);
  padding: var(--filter-popover-header-padding);
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--filter-popover-header-border-color);
  background-color: var(--filter-popover-header-bg-color);
`;

const FilterPopoverHeaderLabel = styled.div`
  color: var(--filter-popover-header-label-color);
  justify-self: center;
  grid-column-start: 2;
  font-size: var(--filter-popover-header-label-font-size);
  font-weight: var(--filter-popover-header-label-font-weight);
`;

const FilterPopoverHeaderButton = styled.div.attrs<{ 'data-testid': string }>({
  'data-testid': 'FilterPopover/DoneButton',
})`
  color: var(--filter-popover-header-button-color);
  justify-self: end;
  font-size: var(--filter-popover-header-button-font-size);
  font-weight: var(--filter-popover-header-button-font-weight);
  height: var(--filter-popover-header-button-height);
  line-height: var(--filter-popover-header-button-height);
`;