'use client'
import { useState, useEffect, ChangeEvent } from 'react'
import Image from 'next/image'
import { GetTIpos } from '@/app/api/tipo/route'
import { ITipo } from '@/app/api/tipo/inteface'
import { INotifyCreate } from '@/app/api/notify/interface'
import { CreateNotify } from '@/app/api/notify/route'
import { useRouter } from 'next/navigation'

export default function Home() {
  const [selectedFile, setSelectedFile] = useState(null)
  const [tipos, setTipos] = useState<ITipo[]>([])
  const [dados, setDados] = useState<INotifyCreate>({
    data: '',
    descricao: '',
    tipo: '',
  })
  const router = useRouter()
  const handleFileChange = (event: any) => {
    setSelectedFile(event.target.files[0])
  }

  const ListaTipos = async () => {
    const tiposGet = await GetTIpos()
    setTipos(tiposGet)
  }
  useEffect(() => {
    ListaTipos()
  }, [])

  const handleSubmit = async (e: any) => {
    e.preventDefault()

    try {
      const resposta = await CreateNotify(dados, selectedFile)
      if (resposta) {
        router.push('/lista')
      }
    } catch (error) {
      console.error('Erro ao enviar o arquivo:', error)
    }
  }

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setDados((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }))
  }

  const handleChangeSelect = (e: ChangeEvent<HTMLSelectElement>) => {
    const { name, value } = e.target
    setDados((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }))
  }
  return (
    <main className="">
      <form onSubmit={handleSubmit} encType="multipart/form-data">
        <div className=" pl-40 pr-40">
          <h1 className="flex flex-1 items-center justify-center font-semibold text-2xl mb-6">
            Tela de Cadastro
          </h1>
          <label
            htmlFor="tipo"
            className="flex  flex-col items-start justify-start mb-2 text-md ml-1 font-medium text-gray-900 dark:text-white flex-1 "
          >
            Selecione a Infração
          </label>
          <select
            id="tipo"
            name="tipo"
            value={dados?.tipo}
            onChange={handleChangeSelect}
            className=" flex-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
          >
            <option disabled selected value="">
              Selecione um tipo
            </option>
            {tipos.map((tip) => (
              <option key={tip.id} value={tip.id}>
                {tip.descricao}
              </option>
            ))}
          </select>
        </div>
        <div className="grid grid-cols-7 gap-4  mt-6 pl-40 pr-40">
          <div className="col-span-5">
            <label
              htmlFor="base-input"
              className="block mb-2 text-md ml-1 font-medium text-gray-900 dark:text-white"
            >
              Nome
            </label>
            <input
              type="text"
              id="descricao"
              name="descricao"
              value={dados?.descricao}
              onChange={handleChange}
              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
            />
          </div>
          <div className="col-span-2">
            <label
              htmlFor="data"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Data{' '}
            </label>
            <input
              type="date"
              id="data"
              name="data"
              value={dados?.data}
              onChange={handleChange}
              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
            />
          </div>
        </div>

        <div className="flex flex-1  items-start justify-start pl-40 pr-96 mt-5">
          <label
            htmlFor="arquivo"
            className="bg-blue-500 text-white py-2 px-4 rounded cursor-pointer"
          >
            Escolher Arquivo
          </label>

          <input
            type="file"
            id="arquivo"
            name="arquivo"
            onChange={handleFileChange}
            accept="application/pdf"
            className="sr-only"
          />
          {selectedFile && (
            <div className="mt-2 ml-3">
              {/* @ts-ignore */}
              Nome do Arquivo: {selectedFile.name}
            </div>
          )}
        </div>
        <div className="flex flex-1  items-end justify-end pl-40 pr-40 mt-5">
          <button
            type="submit"
            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
          >
            Salvar Dados
          </button>
        </div>
      </form>
    </main>
  )
}