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 { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
import { FilterTitle } from '@redocly/theme/components/Filter/FilterTitle';
import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
import { useThemeHooks } from '@redocly/theme/core/hooks';
import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
import { changeTextCasing } from '@redocly/theme/core/utils';

export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element {
  const { useTranslate, useTelemetry } = useThemeHooks();
  const { translate } = useTranslate();
  const telemetry = useTelemetry();

  return (
    <FilterCheckboxesWrapper data-component-name="Filter/FilterCheckboxes">
      <FilterTitle data-translation-key={filter.titleTranslationKey}>
        {translate(filter.titleTranslationKey, filter.title)}
      </FilterTitle>
      <FilterOptions>
        {filter.filteredOptions.map(({ value, count }) => {
          const id = 'filter--' + filter.property + '--' + value;
          return (
            <FilterCheckboxOption
              key={id}
              role="link"
              onClick={() => {
                filter.toggleOption(value);
                telemetry.send('filter_checkbox_toggled', { id });
              }}
            >
              <CheckboxIcon checked={filter.selectedOptions.has(value)} />
              <FilterOptionLabel data-translation-key={value}>
                {changeTextCasing(translate(value), filterValuesCasing)}
              </FilterOptionLabel>
              <CounterTag borderless>{count}</CounterTag>
            </FilterCheckboxOption>
          );
        })}
      </FilterOptions>
    </FilterCheckboxesWrapper>
  );
}

const FilterCheckboxOption = styled(FilterOption)`
  padding-left: var(--filter-option-checkbox-padding-left);
`;

const FilterCheckboxesWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
`;