import React from 'react';
import { useFormContext, useFormValues } from '@digigov/form/FormBuilder';
import { getOptionLabelForSelectValue } from '@digigov/react-modules/FilteredResults/hooks';
import {
  FilterSelectedHeading,
  FilterSelectedSection,
} from '@digigov/ui/app/FilterContainer';
import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
import { Button } from '@digigov/ui/form/Button';

export const FilterChips = () => {
  const { fieldsMap, reset, resetField, submit } = useFormContext();
  const values = useFormValues();
  const enabledFilters = Object.keys(values).filter((v) => values[v]);
  if (enabledFilters.length === 0) return null;
  return (
    <FilterSelectedSection m={0} mb={6}>
      <FilterSelectedHeading mb={0}>
        <ChipContainer>
          {enabledFilters.map((filterKey) => {
            return (
              <Chip
                mb={0}
                key={filterKey}
                onDelete={() => {
                  resetField(filterKey);
                  submit();
                }}
              >
                <b>{fieldsMap[filterKey].label?.primary}</b> {': '}
                {getOptionLabelForSelectValue(
                  fieldsMap[filterKey],
                  values[filterKey]
                )}
              </Chip>
            );
          })}
        </ChipContainer>
        <Button
          onClick={(e) => {
            e.preventDefault();
            reset();
            submit();
          }}
          variant="link"
        >
          Επαναφορά Επιλογών
        </Button>
      </FilterSelectedHeading>
    </FilterSelectedSection>
  );
};

export default FilterChips;