import { zodResolver } from '@hookform/resolvers/zod'
import { Box, FileWarning } from 'lucide-react'
import { useForm } from 'react-hook-form'
import {
  Badge,
  Button,
  Checkbox,
  Form,
  FormControl,
  FormField,
  RadioGroup,
  RadioGroupItem,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Separator,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetSection,
  SheetTitle,
  Switch,
} from 'ui'
import { z } from 'zod'

import { Input } from '../DataInputs/Input'
import { InfoTooltip } from '../info-tooltip'
import { FormItemLayout } from './FormItemLayout/FormItemLayout'

const items = [
  {
    id: 'recents',
    label: 'Recents',
  },
  {
    id: 'home',
    label: 'Home',
  },
  {
    id: 'applications',
    label: 'Applications',
  },
  {
    id: 'desktop',
    label: 'Desktop',
  },
  {
    id: 'downloads',
    label: 'Downloads',
  },
  {
    id: 'documents',
    label: 'Documents',
  },
] as const

export const Page = () => {
  const FormSchema = z.object({
    username: z.string().min(2, {
      message: 'Username must be at least 2 characters.',
    }),
    kevins_input: z.string().min(6, {
      message: 'Username must be at least 6 characters.',
    }),
    email: z
      .string({
        required_error: 'Please select an email to display.',
      })
      .email(),
    consistent_settings: z.boolean().default(false).optional(),
    switch_option: z.boolean().default(false).optional(),
    items: z.array(z.string()).refine((value) => value.some((item) => item), {
      message: 'You have to select at least one item.',
    }),
    type: z.enum(['all', 'mentions', 'none'], {
      required_error: 'You need to select a notification type.',
    }),
  })

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      username: '',
      items: ['recents', 'home'],
    },
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    console.log(data)
  }

  const UserIcon = () => {
    return (
      <div>
        <img
          className="relative h-4 w-4 rounded-full"
          src="https://avatars.githubusercontent.com/u/8291514?v=4"
        />
      </div>
    )
  }

  return (
    <Sheet open={true}>
      <SheetContent side="right" className="overflow-auto" size="default">
        <SheetHeader>
          <SheetTitle>Create a function</SheetTitle>
          <SheetDescription>Create a function</SheetDescription>
        </SheetHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <SheetSection>
              <FormField
                control={form.control}
                name="username"
                render={({ field }) => (
                  <FormItemLayout
                    label="Function name"
                    description="Name will also be used for the function name in postgres."
                    layout="horizontal"
                    labelOptional="Optional"
                    afterLabel={
                      <InfoTooltip side="right">You can also rename this later.</InfoTooltip>
                    }
                  >
                    <FormControl>
                      <Input placeholder="Name of function" {...field} />
                    </FormControl>
                  </FormItemLayout>
                )}
              />
            </SheetSection>
            <Separator />

            {/* <FormField
              control={form.control}
              name="language"
              render={({ field }) => (
                <FormItem className="flex flex-col">
                  <FormLabel>Language</FormLabel>
                  <Popover>
                    <PopoverTrigger asChild>
                      <FormControl>
                        <Button
                          variant="outline"
                          role="combobox"
                          className={cn(
                            'w-[200px] justify-between',
                            !field.value && 'text-muted-foreground'
                          )}
                        >
                          {field.value
                            ? languages.find((language) => language.value === field.value)?.label
                            : 'Select language'}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>
                    <PopoverContent className="w-[200px] p-0">
                      <Command>
                        <CommandInput placeholder="Search language..." />
                        <CommandEmpty>No language found.</CommandEmpty>
                        <CommandGroup>
                          {languages.map((language) => (
                            <CommandItem
                              value={language.label}
                              key={language.value}
                              onSelect={() => {
                                form.setValue('language', language.value)
                              }}
                            >
                              <Check
                                className={cn(
                                  'mr-2 h-4 w-4',
                                  language.value === field.value ? 'opacity-100' : 'opacity-0'
                                )}
                              />
                              {language.label}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </Command>
                    </PopoverContent>
                  </Popover>
                  <FormDescription>
                    This is the language that will be used in the dashboard.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            /> */}
            <SheetSection>
              <FormField
                control={form.control}
                name="switch_option"
                render={({ field }) => (
                  <FormItemLayout
                    afterLabel="Switch"
                    label="Use ./briven directory for everything"
                    description="This is an explanation."
                    layout="flex"
                  >
                    <FormControl>
                      <Switch checked={field.value} onCheckedChange={field.onChange} />
                    </FormControl>
                  </FormItemLayout>
                )}
              />
            </SheetSection>
            <Separator />
            <SheetSection>
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItemLayout
                    label="Choose user"
                    description="This is your public display name."
                    layout="horizontal"
                  >
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl className="w-full">
                        <SelectTrigger className="w-full">
                          <SelectValue
                            placeholder="Select a verified email"
                            className="flex gap-2"
                          />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="m@example.com">
                          <div className="flex gap-2 items-center">
                            <UserIcon />
                            <span>m@example.com</span>
                          </div>
                        </SelectItem>
                        <SelectItem value="m@google.com" className="flex gap-2">
                          <div className="flex gap-2 items-center">
                            <UserIcon />
                            UserIconm@google.com
                          </div>
                        </SelectItem>
                        <SelectItem value="m@support.com" className="flex gap-2">
                          <div className="flex gap-2 items-center">
                            <UserIcon />
                            m@support.com
                          </div>
                        </SelectItem>
                      </SelectContent>
                    </Select>
                  </FormItemLayout>
                )}
              />
            </SheetSection>

            <Separator />

            <SheetSection>
              <FormField
                control={form.control}
                name="kevins_input"
                render={({ field }) => (
                  <FormItemLayout
                    afterLabel="Kevins input"
                    label="Kevins input"
                    description="This is your public display name."
                    layout="vertical"
                    labelOptional="Optional"
                  >
                    <FormControl>
                      <Input
                        icon={<Box strokeWidth={1.5} size={16} />}
                        placeholder="Needs to be 6 long"
                        {...field}
                      />
                    </FormControl>
                  </FormItemLayout>
                )}
              />
            </SheetSection>

            <Separator />

            <SheetSection>
              <FormField
                control={form.control}
                name="consistent_settings"
                render={({ field }) => (
                  <FormItemLayout
                    afterLabel={
                      <Badge variant="destructive" className="flex gap-1">
                        <FileWarning size={12} strokeWidth={1.5} className="text-destructive-500" />
                        Danger
                      </Badge>
                    }
                    label="Use consistent settings"
                    description="This is your public display name."
                    layout="flex"
                  >
                    <FormControl>
                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                    </FormControl>
                  </FormItemLayout>
                )}
              />
            </SheetSection>

            <Separator />

            <SheetSection>
              <FormField
                control={form.control}
                name="items"
                render={() => (
                  <FormItemLayout
                    label="Sidebar"
                    description="Select the items you want to display in the sidebar."
                    layout="horizontal"
                    afterLabel={<InfoTooltip side="right">Please give me info</InfoTooltip>}
                  >
                    {/* <div className="mb-4">
                <FormLabel className="text-base">Sidebar</FormLabel>
                <FormDescription>
                  Select the items you want to display in the sidebar.
                </FormDescription>
              </div> */}
                    {items.map((item) => (
                      <FormField
                        key={item.id}
                        control={form.control}
                        name="items"
                        render={({ field }) => {
                          return (
                            <FormItemLayout
                              key={item.id}
                              className="flex flex-row items-start space-x-3 space-y-0"
                              label={item.label}
                              layout="flex"
                              hideMessage
                            >
                              <FormControl>
                                <Checkbox
                                  checked={field.value?.includes(item.id)}
                                  onCheckedChange={(checked) => {
                                    return checked
                                      ? field.onChange([...field.value, item.id])
                                      : field.onChange(
                                          field.value?.filter((value) => value !== item.id)
                                        )
                                  }}
                                />
                              </FormControl>
                            </FormItemLayout>
                          )
                        }}
                      />
                    ))}
                    {/* <FormMessage /> */}
                  </FormItemLayout>
                )}
              />
            </SheetSection>

            <SheetSection>
              <FormField
                control={form.control}
                name="type"
                render={({ field }) => (
                  <FormItemLayout
                    className="space-y-3"
                    label="Notify me about..."
                    description="I am descript"
                    layout="horizontal"
                  >
                    <FormControl>
                      <RadioGroup
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                        className="flex flex-col space-y-1"
                      >
                        <FormItemLayout
                          className="flex items-center space-x-3 space-y-0"
                          label="All new messages"
                          layout="flex"
                          hideMessage
                        >
                          <FormControl>
                            <RadioGroupItem value="all" />
                          </FormControl>
                        </FormItemLayout>
                        <FormItemLayout
                          className="flex items-center space-x-3 space-y-0"
                          label="Direct messages and mentions"
                          layout="flex"
                          hideMessage
                        >
                          <FormControl>
                            <RadioGroupItem value="mentions" />
                          </FormControl>
                        </FormItemLayout>
                        <FormItemLayout
                          className="flex items-center space-x-3 space-y-0"
                          label="Nothing"
                          layout="flex"
                          hideMessage
                        >
                          <FormControl>
                            <RadioGroupItem value="none" />
                          </FormControl>
                        </FormItemLayout>
                      </RadioGroup>
                    </FormControl>
                  </FormItemLayout>
                )}
              />
            </SheetSection>
            <SheetFooter>
              <Button type="default">Cancel</Button>
              <Button htmlType="submit">Submit</Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  )
}
