/* eslint-disable @typescript-eslint/no-confusing-void-expression */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
/* eslint-disable @typescript-eslint/no-misused-promises */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import React, { useState } from 'react'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm, useWatch } from 'react-hook-form'

import { Button } from '@/components/ui/button'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select'

import type { z } from 'zod'
import { calculatorScheme } from '@/validations/calculatorScheme'
import TableCalculateRate from '../TableCalculateRate'

const typeOfVehicles = [
  'LIVIANOS',
  'PESADOS',
  'MOTOS'
]

const services = [
  'PUBLICO',
  'PARTICULAR'
]

const publicRates = [
  {
    id: 'LIVIANOS',
    rates: {
      0: 316928,
      3: 317228,
      8: 317528,
      17: 317228
    }
  },
  {
    id: 'PESADOS',
    rates: {
      0: 476301,
      3: 476501,
      8: 476701,
      17: 476501
    }
  }

]

const particularRates = [
  {
    id: 'LIVIANOS',
    rates: {
      0: 317528,
      3: 317828,
      8: 318228,
      17: 317828
    }
  },
  {
    id: 'PESADOS',
    rates: {
      0: 476701,
      3: 477001,
      8: 477301,
      17: 477001
    }
  }

]

const motorcycleRates = [
  {
    id: 'MOTOS',
    rates: {
      0: 217881,
      3: 218181,
      8: 218481,
      17: 218181
    }
  }
]

const allRates = [
  {
    type: 'PUBLICO',
    rates: publicRates
  },
  {
    type: 'PARTICULAR',
    rates: particularRates
  },
  {
    type: 'MOTOS',
    rates: motorcycleRates
  }
]

const calculePrice = (ratesKeys: any, selectedTypeOfVehicle: any, yearsInService: number) => {
  return ratesKeys.reduce((acc: any, key: any, index: any, array: any) => {
    const nextKey = array[index + 1] // Obtiene la siguiente clave para formar el rango

    // Compara si el año está dentro del rango [key, nextKey)
    if (yearsInService >= key && (nextKey === undefined || yearsInService < nextKey)) {
      acc = selectedTypeOfVehicle.rates[key] // Devuelve el precio asociado al límite inferior del rango
    }
    return acc
  }, null)
}

function CalculatorForm () {
  const form = useForm<z.infer<typeof calculatorScheme>>({
    resolver: zodResolver(calculatorScheme),
    defaultValues: {
      name: '',
      vehicleRegistrationNumber: '',
      email: '',
      model: undefined,
      cellPhoneNumber: '',
      typeOfVehicle: ''
    }
  })

  const vehicle = useWatch({ name: 'typeOfVehicle', control: form.control })

  const [isRateCalculation, setIsRateCalculation] = useState<boolean>(false)
  const [dataRateCalculation, setDataRateCalculation] = useState<any>({})

  const onSubmit = (values: z.infer<typeof calculatorScheme>) => {
    const { name, model, service, typeOfVehicle, vehicleRegistrationNumber, cellPhoneNumber, email } = values

    const yearsInService = new Date().getFullYear() - model

    if (typeOfVehicle === 'MOTOS') {
      const selectedVehicle = allRates.find(vehicle => vehicle.type === 'MOTOS')

      const selectedTypeOfVehicle = selectedVehicle?.rates.find(vehicle => vehicle.id === typeOfVehicle)

      if (!selectedTypeOfVehicle) return

      const ratesKeys = Object.keys(selectedTypeOfVehicle.rates).map(Number)

      // Utiliza reduce para encontrar el precio basado en el año
      const price = calculePrice(ratesKeys, selectedTypeOfVehicle, yearsInService)

      if (price !== null) {
        setIsRateCalculation(true)
        setDataRateCalculation({

          placa: vehicleRegistrationNumber,
          modelo: model,
          tipo_vehiculo: typeOfVehicle,
          servicio: service,
          price

        })
      } else {
        console.log(`No se encontró un precio para el año ${yearsInService}.`)
      }
    }

    if (service === 'PARTICULAR') {
      const selectedService = allRates.find(service => service.type === 'PARTICULAR')

      const selectedTypeOfVehicle = selectedService?.rates.find(vehicle => vehicle.id === typeOfVehicle)

      if (!selectedTypeOfVehicle) return

      const ratesKeys = Object.keys(selectedTypeOfVehicle.rates).map(Number)

      // Utiliza reduce para encontrar el precio basado en el año
      const price = calculePrice(ratesKeys, selectedTypeOfVehicle, yearsInService)

      if (price !== null) {
        setIsRateCalculation(true)
        setDataRateCalculation({

          placa: vehicleRegistrationNumber,
          tipo_vehiculo: typeOfVehicle,
          servicio: service,
          modelo: model,
          nombre: name,
          correo: email,
          telefono: cellPhoneNumber,
          price

        })
      } else {
        console.log(`No se encontró un precio para el año ${yearsInService}.`)
      }
    }

    if (service === 'PUBLICO') {
      const selectedService = allRates.find(service => service.type === 'PUBLICO')

      const selectedTypeOfVehicle = selectedService?.rates.find(vehicle => vehicle.id === typeOfVehicle)

      if (!selectedTypeOfVehicle) return

      const ratesKeys = Object.keys(selectedTypeOfVehicle.rates).map(Number)

      // Utiliza reduce para encontrar el precio basado en el año
      const price = calculePrice(ratesKeys, selectedTypeOfVehicle, yearsInService)

      if (price !== null) {
        setIsRateCalculation(true)
        setDataRateCalculation({

          placa: vehicleRegistrationNumber,
          tipo_vehiculo: typeOfVehicle,
          servicio: service,
          modelo: model,
          nombre: name,
          correo: email,
          telefono: cellPhoneNumber,
          price

        })
      } else {
        console.log(`No se encontró un precio ${yearsInService}.`)
      }
    }
  }

  return (
    <div>
      {
        !isRateCalculation
          ? (
          <>
        <div className="flex flex-col gap-6 mb-6">
          <h1 className="text-[2rem] font-semibold">Calcula <span className="text-primary">aquí</span> tu tarifa.</h1>
          <p className="font-normal">Diligencia estos datos para calcular el valor de tu RTM.</p>
        </div>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">

            <FormField
              control={form.control}
              name="vehicleRegistrationNumber"
              render={({ field }) => (
                <FormItem className="w-full">
                  <FormControl>
                    <Input type="text" className=" border-t-0 border-r-0 border-l-0 rounded-none border-b-[1px] border-b-primary outline-none" placeholder="Placa del vehículo" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )} />
            <FormField
              control={form.control}
              name="typeOfVehicle"
              render={({ field }) => (
                <div className='w-full flex flex-col gap-4'>
                  <FormLabel className="text-[#7C7C7C]">Tipo de Vehículo</FormLabel>

                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <SelectTrigger className="w-full border-primary">
                      <SelectValue placeholder="Seleccionar" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        {
                          typeOfVehicles.map(type => (
                            <SelectItem key={type} value={type}>{type}</SelectItem>

                          ))
                        }

                      </SelectGroup>
                    </SelectContent>

                  </Select>
                  <FormMessage />

                </div>

              )}
            />

            <FormField
              control={form.control}
              name="service"
              render={({ field }) => (
                <div className="w-full flex flex-col gap-4">
                  <FormLabel className="text-[#7C7C7C]">Servicio</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value} >
                    <SelectTrigger className="w-full border-primary">
                      <SelectValue placeholder="Seleccionar" />
                    </SelectTrigger>
                    <SelectContent >
                      <SelectGroup>

                        {
                          vehicle !== 'MOTOS'
                            ? (
                                services.map(service => (
                            <SelectItem key={service} value={service}>{service}</SelectItem>

                                ))
                              )
                            : (
                          <SelectItem value="default">No aplica para este vehículo</SelectItem>
                              )
                        }

                      </SelectGroup>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </div>
              )} />
            <FormField
              control={form.control}
              name="model"
              render={({ field }) => (
                <FormItem className="w-full">
                  <FormControl>
                    <Input type="number" className=" border-t-0 border-r-0 border-l-0 rounded-none border-b-[1px] border-b-primary outline-none" placeholder="Modelo" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )} />

            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem className="w-full">
                  <FormControl >
                    <Input type="text" className=" border-t-0 border-r-0 border-l-0 rounded-none border-b-[1px] border-b-primary outline-none" placeholder="Nombre Propietario" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="cellPhoneNumber"
              render={({ field }) => (
                <FormItem className="w-full">
                  <FormControl>
                    <Input type="tel" className=" border-t-0 border-r-0 border-l-0 rounded-none border-b-[1px] border-b-primary outline-none" placeholder="Número de Celular" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )} />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem className="w-full">
                  <FormControl >
                    <Input type="email" className=" border-t-0 border-r-0 border-l-0 rounded-none border-b-[1px] border-b-primary outline-none" placeholder="Correo electronico" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit">Calcular</Button>
          </form>
        </Form>

      </>
            )
          : (
          <TableCalculateRate dataCalculateRate={dataRateCalculation} />
            )
      }
    </div>
  )
}

export default CalculatorForm