import React, { useState } from 'react';
import renderer from 'react-test-renderer';
import { render, fireEvent, screen, act } from '@testing-library/react';
import 'jest-styled-components';
import { DeleteEmpty } from '@devesharp/react-utils/lib/Utils';
import { ETagFilterType, TagsFilters } from './index';

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

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

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

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar 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 tree = renderer.create(<MockComponent />).toJSON();
   expect(tree).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} />;
   }

   render(<MockComponent />);

   expect(screen.queryAllByText('non-ignore')[0]).not.toBeUndefined();

   act(() => {
      fireEvent.click(screen.getByTestId('tag-non-ignore'));
   });

   // Deve remover tag ao clicar nela
   expect(screen.queryAllByText('non-ignore')[0]).toBeUndefined();
});
