import React from 'react';

import FilterContainer, {
  FilterContent,
  FilterHeadingContainer,
  FilterOptionsSection,
  FilterSelectedHeading,
  FilterSelectedSection,
} from '@digigov/ui/app/FilterContainer';
import { Button } from '@digigov/ui/form/Button';
import { Heading } from '@digigov/ui/typography/Heading';
import { Hint } from '@digigov/ui/typography/Hint';

export const WithControls = {
  render: (args) => {
    return (
      <FilterContainer
        positionRelative={args.positionRelative}
        open={args.open}
        border={args.border}
      >
        <FilterHeadingContainer
          onClick={() => console.log('toggle')}
          closeLabel={args.closeLabel}
        >
          <Heading size="md">Φίλτρα</Heading>
        </FilterHeadingContainer>
        <FilterContent>
          <FilterSelectedSection>
            <FilterSelectedHeading>
              <Heading size="sm">Επιλεγμένα φίλτρα</Heading>
              <Button variant="link">Καθαρισμός</Button>
            </FilterSelectedHeading>
            <Hint>Περιοχή για Chips.</Hint>
            <Hint>Αν δεν υπάρχουν επιλεγμένα φίλτρα, να μην εμφανίζεται.</Hint>
          </FilterSelectedSection>
          <FilterOptionsSection>
            <Hint> Περιοχή για πεδία αναζήτησης</Hint>
          </FilterOptionsSection>
        </FilterContent>
      </FilterContainer>
    );
  },
  args: {
    positionRelative: 'md',
    border: true,
    open: true,
    closeLabel: 'Κλείσιμο φίλτρων',
  },
  argTypes: {
    positionRelative: {
      options: ['always', 'sm', 'md', 'lg', 'never'],
      control: { type: 'select' },
    },
    border: {
      control: 'boolean',
    },
    open: {
      control: 'boolean',
    },
    closeLabel: {
      control: 'text',
    },
  },
};

export default {
  title: 'Digigov UI/app/FilterContainer',
  component: FilterContainer,
  displayName: 'FilterContainer',
};