import React, { useState } from 'react';
import { DeleteEmpty } from '@devesharp/react-utils';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { TagsFilters, ETagFilterType, ITagsSchema } from './index';

const css = styled.div;

const Style = css`
   background: white !important;
`;

storiesOf('Components/TagsFilters', module)
   .add('all tags', () => {
      const filtersSchema: ITagsSchema = {
         /**
          * com prefixo
          */
         prefix: {
            prefix: 'R$ ',
         },

         /**
          * com sufixo
          */
         suffix: {
            suffix: ' m²',
         },

         /**
          * Select
          *
          * Vários valores, porém apenas 1 é mostrado no TagsFilter
          */
         select: {
            type: ETagFilterType.Select,
            values: {
               select1: 'Select One',
               select2: 'Select Two',
            },
         },

         /**
          * Localização
          *
          * String com localização concatenada como underline como divisão, ex:
          * SP, São Paulo,São Miguel Paulista_RJ,Vila Mimosa
          * {Estado},{Cidade},{Bairro}_{Estado},{Cidade}_{Estado},{Cidade},{Bairro}
          */
         location: {
            type: ETagFilterType.Location,
         },

         /**
          * Checkbox
          *
          * Todos os valores com checked são mostrados
          */
         checkbox: {
            type: ETagFilterType.CheckBox,
            values: {
               checkbox1: 'Checkbox One',
               checkbox2: 'Checkbox Two',
            },
         },

         /**
          * Price
          *
          * Preço
          */
         price: {
            type: ETagFilterType.InputPrice,
            prefix: 'R$ ',
         },

         /**
          * Number
          *
          * Pode ser definido decimals
          */
         number: {
            type: ETagFilterType.InputNumber,
            decimals: 4,
         },

         /**
          * Date
          *
          * Pode ser definido formato para data
          */
         date: {
            type: ETagFilterType.Date,
            format: 'dd MMM yyyy',
         },

         /**
          * Ignore values
          *
          * Todos os pode receber a key ignore, para não mostrar valor na TagsFilters
          */
         ignore: {
            ignore: ['ignore'],
         },
      };

      const [filters, setFilters] = useState({
         prefix: '1200',
         suffix: '1200',
         select: 'select1',
         location: 'SP, São Paulo,São Miguel Paulista_RJ,Vila Mimosa',
         checkbox: ['checkbox1', 'checkbox2'],
         price: 12000.99,
         number: 1.23456,
         date: new Date(2014, 1, 24),
         ignore: ['ignore'],
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('simple tag', () => {
      const filtersSchema = {
         id: {
            prefix: 'ID. ',
         },
      };

      const [filters, setFilters] = useState({
         id: 1200,
         status: `featured`,
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('filter select', () => {
      const filtersSchema = {
         select: {
            type: ETagFilterType.Select,
            values: {
               select1: 'Select One',
               select2: 'Select Two',
            },
         },
      };

      const [filters, setFilters] = useState({
         select: 'select1',
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('filter location', () => {
      const filtersSchema = {
         location: {
            type: ETagFilterType.Location,
         },
      };

      const [filters, setFilters] = useState({
         location: 'SP, São Paulo,São Miguel Paulista_RJ,Vila Mimosa',
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('filter checkbox', () => {
      const filtersSchema = {
         checkbox: {
            type: ETagFilterType.CheckBox,
            values: {
               select1: 'Select One',
               select2: 'Select Two',
            },
         },
      };

      const [filters, setFilters] = useState({
         checkbox: ['select1', 'select2'],
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('filter price', () => {
      const filtersSchema = {
         price: {
            type: ETagFilterType.InputPrice,
            decimals: 2,
         },
      };

      const [filters, setFilters] = useState({
         price: [100.02],
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('filter number', () => {
      const filtersSchema = {
         number: {
            type: ETagFilterType.InputNumber,
            decimals: 4,
         },
      };

      const [filters, setFilters] = useState({
         number: [10000.02],
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('filter date', () => {
      const filtersSchema = {
         date: {
            type: ETagFilterType.Date,
         },
      };

      const [filters, setFilters] = useState({
         date: new Date(2014, 1, 24),
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('filter date format', () => {
      const filtersSchema = {
         date: {
            type: ETagFilterType.Date,
            format: 'dd MMM yyyy',
         },
      };

      const [filters, setFilters] = useState({
         date: new Date(2014, 1, 24),
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('suffix', () => {
      const filtersSchema = {
         text: {
            suffix: ' m²',
         },
      };

      const [filters, setFilters] = useState({
         text: 1200,
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('prefix', () => {
      const filtersSchema = {
         prefix: {
            prefix: 'R$ ',
         },
      };

      const [filters, setFilters] = useState({
         prefix: 1200,
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('default value', () => {
      const filtersSchema = {
         defaultText: {
            default: 'default',
         },
      };

      const [filters, setFilters] = useState({
         defaultText: 'default',
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('with fullColor', () => {
      const filtersSchema = {
         id: {
            prefix: 'ID. ',
         },
      };

      const [filters, setFilters] = useState({
         id: 1200,
         status: `featured`,
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} fullColor />
            </div>
         </Style>
      );
   })
   .add('ignore value', () => {
      const filtersSchema = {
         ignoreText: {
            ignore: ['ignore'],
         },
      };

      const [filters, setFilters] = useState({
         ignoreText: 'ignore',
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   })
   .add('ignore without value ignore', () => {
      const filtersSchema = {
         ignoreText: {
            ignore: ['ignore'],
         },
      };

      const [filters, setFilters] = useState({
         ignoreText: 'non-ignore',
      });

      const removeTag = (key: string, value: any): void => {
         const newFilters = { ...filters };
         newFilters[key] = value;

         setFilters(DeleteEmpty(newFilters));
      };

      return (
         <Style>
            <div className="p-4">
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </div>
         </Style>
      );
   });
