'use client'

import { AreasProps, createAreas } from '@/api/areas'
import InputFile from '@/components/input-file'
import { LoadingSpinIcon } from '@/components/loading-spin-icon'
import { StyledInputs } from '@/components/mui/styled-inputs'
import { Button } from '@/components/ui/button'
import { TextField } from '@mui/material'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'next/navigation'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'

export default function Area() {
  const { register, handleSubmit, watch } = useForm<AreasProps>()
  const router = useRouter()

  const data = watch()
  const valueMobileBanner = data?.mobileBanner?.['0']?.name
  const valueDesktopBanner = data?.desktopBanner?.['0']?.name

  const queryClient = useQueryClient()

  const mutation = useMutation({
    mutationFn: createAreas,
    onSuccess: () => {
      toast.success('Área criada com sucesso!')
      queryClient.invalidateQueries({ queryKey: ['areas'] })
      router.push('/admin')
    },
  })

  function onSubmit(data: AreasProps) {
    // console.log('🚀 ~ onSubmit ~ data:', data)
    // const fileMobile = data.mobileBanner?.[0]
    // const fileDesktop = data.desktopBanner?.[0]

    // const formData = new FormData()
    // formData.append('mobileBanner', fileMobile, fileMobile?.name)
    // formData.append('desktopBanner', fileDesktop, fileDesktop?.name)

    // console.log('🚀 ~ onSubmit ~ formData:', formData)
    const dataArea = {
      ...data,
      mobileBanner:
        '/Users/wellton/Documents/www/sevenpro-frontend/public/images/banners/negocios-mobile.jpg',
      desktopBanner:
        '/Users/wellton/Documents/www/sevenpro-frontend/public/images/banners/negocios.jpg',
    }
    console.log('🚀 ~ onSubmit ~ data:', dataArea)
    mutation.mutate(dataArea)
  }

  return (
    <section className="container py-20 space-y-10">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="flex items-center gap-6">
          <h1 className="text-3xl font-bold">Criar Área</h1>
          <Button variant="secondary" className="uppercase rounded-sm">
            {mutation.isPending && <LoadingSpinIcon />}
            Salvar e publicar
          </Button>
        </div>
        <div className="w-full mt-16">
          <TextField
            label="Nome da área"
            variant="standard"
            type="text"
            className="flex"
            {...register('name')}
            sx={StyledInputs({ color: '#26AAA7' })}
          />

          <div className="flex justify-between flex-wrap gap-6 py-6">
            <div className="flex flex-col flex-1 mt-6">
              <h6 className="text-xl text-purple-100">Banner Desktop</h6>
              <span className="mt-4">Dimensões recomendadas: 1512 x 300</span>
              <span>Formatos aceitos: .png, .jpg, .jpeg</span>

              <InputFile
                id="desktopBanner"
                values={valueDesktopBanner}
                label="Adicionar banner"
                {...register('desktopBanner')}
              />
            </div>
            <div className="flex flex-col flex-1 mt-6">
              <h6 className="text-xl text-purple-100">Banner Mobile</h6>
              <span className="mt-4">Dimensões recomendadas: 390 x 300</span>
              <span>Formatos aceitos: .png, .jpg, .jpeg</span>
              <InputFile
                id="mobileBanner"
                values={valueMobileBanner}
                label="Adicionar banner"
                {...register('mobileBanner')}
              />
            </div>
          </div>
        </div>
      </form>
    </section>
  )
}
