'use client'

import { StyledInputs } from '@/components/mui/styled-inputs'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'
import { Autocomplete, TextField } from '@mui/material'
import { format } from 'date-fns'
import { CalendarIcon, PlusIcon, Trash } from 'lucide-react'
import { useState } from 'react'

const options = [
  { label: 'The Godfather', id: 1 },
  { label: 'Pulp Fiction', id: 2 },
]

export default function EditCourse() {
  const [date, setDate] = useState<Date>()

  return (
    <section className="container py-10">
      <form>
        <div className="flex items-center gap-6">
          <h1 className="text-green-700 text-3xl font-bold">Editar curso</h1>
          <Button variant="third" className="uppercase">
            Salvar como rascunho
          </Button>
          <Button variant="secondary" className="uppercase">
            Salvar e publicar
          </Button>
          <Button
            variant="ghost"
            className="uppercase flex items-center gap-2 text-orange-100 hover:text-orange-100"
          >
            <span>Apagar curso</span>
            <Trash />
          </Button>
        </div>
        <div className="flex w-full mt-10">
          <div className="flex-1 flex flex-col border-r border-gray-50 pr-6 space-y-4">
            <h6 className="text-xl text-purple-100">
              Informações sobre o curso
            </h6>

            <TextField
              label="Nome do curso"
              variant="standard"
              type="text"
              sx={StyledInputs({ color: '#26AAA7' })}
            />

            <Autocomplete
              options={options}
              sx={StyledInputs({ color: '#26AAA7' })}
              renderInput={(params) => (
                <TextField {...params} label="Área" variant="standard" />
              )}
            />

            <TextField
              label="Descrição do Curso"
              variant="standard"
              type="text"
              multiline
              rows={4}
              sx={StyledInputs({ color: '#26AAA7' })}
            />

            <TextField
              label="Nome dos(as) Professores(as):"
              variant="standard"
              type="text"
              sx={StyledInputs({ color: '#26AAA7' })}
            />

            <div className="flex justify-between flex-wrap gap-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: </span>
                <span>Formatos aceitos: .png, .jpg</span>
                <Button
                  variant="third"
                  className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto md:w-[436px]"
                >
                  Adicionar banner
                </Button>
              </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: </span>
                <span>Formatos aceitos: .png, .jpg</span>
                <Button
                  variant="third"
                  className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto md:w-[436px]"
                >
                  Adicionar banner
                </Button>
              </div>
            </div>

            <Separator className="!mt-10 !mb-4" />
            <h6 className="text-xl text-purple-100 mb-4">Datas</h6>
            <div className="flex flex-col space-y-6">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-2">
                  <Checkbox id="start" />
                  <label
                    htmlFor="start"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Definir data de início
                  </label>
                </div>
                <div className="flex flex-col">
                  <Label>Data de início</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant={'ghost'}
                        className={cn(
                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
                          !date && 'text-muted-foreground',
                        )}
                      >
                        {date ? (
                          format(date, 'dd/MM/yyyy')
                        ) : (
                          <span className="text-gray-600">MM/DD/YYYY</span>
                        )}
                        <CalendarIcon className="ml-auto h-4 w-4 text-green-400" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                      <Calendar
                        mode="single"
                        selected={date}
                        onSelect={setDate}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>
              </div>
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-2">
                  <Checkbox id="closure" />
                  <label
                    htmlFor="closure"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Definir data de encerramento
                  </label>
                </div>
                <div className="flex flex-col">
                  <Label>Data de encerramento</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant={'ghost'}
                        className={cn(
                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
                          !date && 'text-muted-foreground',
                        )}
                      >
                        {date ? (
                          format(date, 'dd/MM/yyyy')
                        ) : (
                          <span className="text-gray-600">MM/DD/YYYY</span>
                        )}
                        <CalendarIcon className="ml-auto h-4 w-4 text-green-400" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                      <Calendar
                        mode="single"
                        selected={date}
                        onSelect={setDate}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>
              </div>
            </div>

            <Separator className="!mt-10 !mb-4" />

            <h6 className="text-xl text-purple-100 mb-4">Módulos</h6>

            <div className="flex flex-col p-4 gap-6 border border-green-900">
              <TextField
                label="Título"
                variant="standard"
                type="text"
                sx={StyledInputs({ color: '#26AAA7' })}
              />

              <TextField
                label="Descrição"
                variant="standard"
                type="text"
                multiline
                rows={4}
                sx={StyledInputs({ color: '#26AAA7' })}
              />
            </div>

            <Button
              variant="third"
              className="uppercase w-52 flex items-center gap-2 !mt-8"
            >
              <PlusIcon size={20} /> <span>Adicionar Módulo</span>
            </Button>
          </div>
          <div className="w-[380px] pl-6 flex flex-col gap-4">
            <h6 className="text-xl text-purple-100 mb-4">
              Qual o público alvo?
            </h6>
            <div className="flex items-center gap-2 ml-4">
              <Checkbox id="terms" />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Estudante
              </label>
            </div>
            <div className="flex items-center gap-2 ml-4">
              <Checkbox id="terms" />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Profissionais
              </label>
            </div>
            <div className="flex items-center gap-2 ml-4">
              <Checkbox id="terms" />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Empresas
              </label>
            </div>
            <h6 className="text-xl text-purple-100 my-4">
              Qual o tipo de curso?
            </h6>
            <div className="flex items-center gap-2 ml-4">
              <Checkbox id="terms" />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Curso rápido
              </label>
            </div>
            <div className="flex items-center gap-2 ml-4">
              <Checkbox id="terms" />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Curso de aprofundamento
              </label>
            </div>
            <div className="flex items-center gap-2 ml-4">
              <Checkbox id="terms" />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Curso Corporativo
              </label>
            </div>
          </div>
        </div>
      </form>
    </section>
  )
}
