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

storiesOf('Components/TagsFilters', module)
   .add('simple tag', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('filter select', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('filter location', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('filter checkbox', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('filter price', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('filter number', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('filter date', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('filter date format', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('suffix', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('prefix', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('default value', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('ignore value', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   })
   .add('ignore without value ignore', () => {
      function Stub(): any {
         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 (
            <View style={{ padding: 10 }}>
               <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />
            </View>
         );
      }

      return <Stub />;
   });
