import React from 'react';
import { Meta, Story } from '@storybook/react';
import { IFilterAccordionProps, OrganismFilterAccordion } from 'react/organisms/FilterAccordion';
import { action } from '@storybook/addon-actions';

const meta: Meta = {
  title: 'React/organisms/FilterAccordion',
  component: OrganismFilterAccordion,
  argTypes: {
    accordionElements: {
    },
  },
  parameters: {
    controls: { expanded: true },
  },
  subcomponents: {},
};

export default meta;

const TemplateFilterAccordion: Story<IFilterAccordionProps> = (props) => <OrganismFilterAccordion {...props} />;

export const FilterAccordion = TemplateFilterAccordion.bind({});

FilterAccordion.args = {
  accordionElements: [
    {
      id: 1,
      accordionTitle: "Categories",
      value: "categories",
      filters: [
        {
          type: "link",
          text: "Home",
          value: "home",
          link: '/rewards/home',
          active: true,
        },
        {
          type: "link",
          text: "Sweepstakes",
          value: "sweepstakes",
          link: '/rewards/sweepstakes'
        },
        {
          type: "link",
          text: "Clothes",
          value: "clothes",
          active: false,
          link: '/rewards/clothes'
        },
        {
          type: "link",
          text: "Accesories",
          value: "accesories",
          link: '/rewards/accesories'
        },
      ],
      sortButtons: [],
    },
    {
      id: 2,
      accordionTitle: "Brand",
      value: "brands",
      filters: [
        {
          type: "check",
          text: "Bud Light",
          value: "bud_light",
          checked: true,
        },
        {
          type: "check",
          text: "Budweiser",
          value: "budweiser",
          checked: true,
        },
        {
          type: "check",
          text: "Busch",
          value: "busch",
          checked: false,
        },
        {
          type: "check",
          text: "Michelob Ultra",
          value: "michelob_ultra",
          checked: false,
        },
        {
          type: "check",
          text: "Natural Light",
          value: "natural_light",
          checked: true,
        },
        {
          type: "check",
          text: "Corona",
          value: "corona",
          checked: false,
        },
      ],
      sortButtons: [],
    },
    {
      id: 3,
      accordionTitle: "Sort by",
      value: "",
      filters: [],
      sortButtons: [
        {
          title: "Alphabeticaly",
          buttons: [
            {
              id: 1,
              text: "A - Z",
              selected: true,
            },
            {
              id: 2,
              text: "Z - A",
              selected: false,
            },
          ],
        },
        {
          title: "By price",
          buttons: [
            {
              id: 3,
              text: "$ - $$$",
              selected: true,
            },
            {
              id: 4,
              text: "$$$ - $",
              selected: false,
            },
          ],
        },
      ],
    },
  ],
  clearButtonLabel: 'Clear all',
  handleClear: action('Event Click'),
  showResultsLabel: 'Show 123 rewards',
  handleShow: action('Event Click'),
  showMore: false,
};
