import React, { useEffect, useReducer, useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { TagsFilters, ETagFilterType } from '.';
import { deleteEmpty } from '../../../services';

const css = styled.div;

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

storiesOf('Components/TagsFilters', module)
   .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.InputPrice,
            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: '2014-01-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: '2014-01-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('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>
      );
   });
