import React, { useCallback, useEffect, useRef, useState } from 'react';
import CriacaoDeAreaDeRecuperacao from './components/criacaoAreaDeRecuperacao';
import Title from './components/title';
import Select from './components/select';
import CustomInput from './components/input';
import './App.css';
import VerticalSeparator from './components/verticalSeparator';
import { car } from './api';
import { CarGeometryResponse } from './api/Car.types';
import { LiaSearchSolid } from 'react-icons/lia';
import useAsyncFetch from './hooks/asyncFetch';
import LoadingModal from './components/loadingModal';
import LateralMenu from './components/criacaoAreaDeRecuperacao/lateralMenu';
import BaseMapButton from './components/filterButton';

function App() {
  const [initialPolygon, setInitialPolygon] = useState<Array<any> | undefined>(
    undefined,
  );
  const [numCar, setNumCar] = useState('');
  const [isMapLock, setIsMapLock] = useState(true);

  const fetchInitialPolygonAndChangeState = useCallback(async () => {
    try {
      const response: CarGeometryResponse = await car.getGeometry(
        `/dev/ief/car/get-geometry?car=${numCar}`,
      );
      setInitialPolygon(response.appGeometries as any);
    } catch (e) {
      console.error(e);
    }
  }, [numCar]);
  const { execute: fetchInitialPolygonAsyncAndChangeState, isLoading } =
    useAsyncFetch({
      fetchFunc: fetchInitialPolygonAndChangeState,
    });
  const handleNumCarChange = useCallback((text: string) => {
    setNumCar(text);
  }, []);
  return (
    <div style={{ display: 'flex', flex: 1, flexDirection: 'column' }}>
      <header id="header" style={{ display: 'flex', flex: 1 }}>
        <img alt="banner" src="/imgs/img-topo.png" />
      </header>
      {isLoading && (
        <LoadingModal
          messageStyle={{ color: '#365237', fontSize: '1.5rem' }}
          spinColor="#365237"
          spinThickness={5}
          msg="Buscando dados do CAR, por favor aguarde"
        />
      )}
      <div
        style={{
          minHeight: '87vh',
          backgroundColor: 'white',
          display: 'flex',
          fontSize: '1.5rem',
          flexDirection: 'column',
          flex: 3,
        }}
      >
        <Title
          className="title"
          value="Solicitação de adesão ao Programa de Regularização Ambiental"
        />
        <div
          style={{
            display: 'flex',
            flex: 1,
            flexDirection: 'row',
          }}
        >
          <div
            style={{
              display: 'flex',
              boxSizing: 'border-box',
              padding: '2rem 0 2rem 2rem',
              alignContent: 'center',
              flex: 1,
              justifyContent: 'center',
            }}
          >
            <div
              style={{
                minWidth: '40rem',
                width: '80%',
                justifyContent: 'flex-start',
                gap: '5rem',
                boxSizing: 'border-box',
                padding: '0 5rem',
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
              }}
            >
              <Select
                labelStyle={{
                  fontFamily: 'Montserrat SemiBold',
                  color: '#365237',
                  paddingLeft: 0,
                  fontSize: '1.1rem',
                }}
                wrapperStyle={{ width: '100%', maxWidth: '40rem' }}
                style={{ flex: 1, backgroundColor: '#e9e6e0', border: 'none' }}
                labelDirection={{ direction: 'row', spaceBetween: '1rem' }}
                label="Selecione o imóvel"
              />
              <CustomInput
                value={numCar}
                wrapperStyle={{ width: '100%', maxWidth: '40rem' }}
                style={{ flex: 1 }}
                onChange={handleNumCarChange}
                labelStyle={{
                  fontFamily: 'Montserrat SemiBold',
                  fontSize: '1.1rem',
                  color: '#365237',
                }}
                label="Pesquisar por:"
                initialColor="#e9e6e0"
              >
                <LiaSearchSolid
                  onClick={async () => {
                    await fetchInitialPolygonAsyncAndChangeState();
                    setIsMapLock(false);
                  }}
                  focusable="false"
                  style={{
                    fontSize: '2rem',
                    color: '#597b2f',
                    cursor: 'pointer',
                  }}
                />
              </CustomInput>
            </div>
          </div>
          <VerticalSeparator
            style={{
              borderColor: '#99AC80',
              height: '90%',
              margin: '0 0 3rem 0',
            }}
          />
          <div
            style={{
              flex: 1.5,
              padding: '2rem 5rem 5rem 5rem',
              display: 'flex',
            }}
          >
            <CriacaoDeAreaDeRecuperacao
              isMapLock={isMapLock}
              initialPolygons={initialPolygon}
            />
          </div>
        </div>
      </div>
      <footer id="footer" style={{ flex: 1, display: 'flex' }}>
        <img
          alt="footer"
          style={{ objectFit: 'cover', flex: 1 }}
          src="/imgs/footer.png"
        />
      </footer>
    </div>
  );
}

export default App;
