import React from 'react';

import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
  // eslint-disable-next-line import/no-extraneous-dependencies
} from '@storybook/addon-docs/blocks';
import { FaChevronRight } from '@react-icons/all-files/fa/FaChevronRight';

import LinkList from '.';
import styles from './link-list.module.scss';

export default {
  title: 'Theme/Molecules/Link List',
  component: LinkList,
  argTypes: {
    lists: {
      name: 'lists',
      type: { name: 'object', required: true },
      defaultValue: '',
      description: 'Lists containing the titles and values of the links',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: '' },
      },
    },
    showListTitle: {
      name: 'showListTitle',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Shows the title of the list item.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    imageOnly: {
      name: 'imageOnly',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'Will display lists with only images.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    singleList: {
      name: 'singleList',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'Renders either a single list or multiple lists.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    listIcon: {
      name: 'listIcon',
      type: { name: '', required: false },
      defaultValue: '',
      description: 'Add an icon if needed to the list items.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '' },
      },
      control: {
        type: null,
      },
    },
    disableLazyLoad: {
      name: 'disableLazyLoad',
      type: { name: 'boolean', required: false },
      defaultValue: '',
      description:
        'When set to True, once this component is loaded, LazyLoad will not care about it anymore',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    height: {
      name: 'height',
      type: { name: 'number', required: false },
      defaultValue: '',
      description:
        'Lazy loading images is supported out of box, no extra config needed, set `height` for better experience',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '' },
      },
    },
    width: {
      name: 'width',
      type: { name: 'number', required: false },
      defaultValue: '',
      description: 'set width to the image',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '' },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component that displays a list of links. Used frequently for example in footers and headers.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <div className={styles.linkListContaner}>
    <LinkList {...args} />
  </div>
);

export const Default = Template.bind({});
Default.args = {
  showListTitle: true,
  imageOnly: false,
  singleList: false,
  listIcon: <FaChevronRight />,
  lists: {
    menu_short_code: 'nav_1',
    children: [
      {
        title: 'Top Casinos',
        value: '#',
        children: [
          { title: 'Rizk Casino', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Gopher Gold', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Bet 365', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Sun Vegas', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Kassu Casino', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Dream Vegas Casino', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Betfair', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Chanz Casino', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
        ],
      },
      {
        title: 'Info',
        value: '#',
        children: [
          { title: 'Privacy policy', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Contact us', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Paddy Power', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          { title: 'Pearls of India', value: '#', image: 'rizk-logopng7ed316ac19-original.png' },
          {
            title: 'Break da Bank Again',
            value: '#',
            image: 'rizk-logopng7ed316ac19-original.png',
          },
        ],
      },
    ],
  },
  height: 30,
  width: 40,
};
