import React, { useState } from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import 'jest-styled-components';
import { ETagFilterType, TagsFilters } from '.';
import { deleteEmpty } from '../../../services';

it('snapshot - tag text', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag select', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag location', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag checkbox', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag price', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag date', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag date with format', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag number', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - tag suffix', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - with tag default', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - with tag value ignore', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('snapshot - with tag value not ignored', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }
   const { toJSON } = render(<MockComponent />);
   expect(toJSON()).toMatchSnapshot();
});

it('testar removeTag', () => {
   function MockComponent(): 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 <TagsFilters filtersSchema={filtersSchema} filters={filters} removeTag={removeTag} />;
   }

   const { queryByText, getByTestId } = render(<MockComponent />);

   expect(queryByText('non-ignore')).not.toBeNull();

   fireEvent.press(getByTestId('tag-non-ignore'));

   // Deve remover tag ao clicar nela
   expect(queryByText('non-ignore')).toBeNull();
});
