// **** Components ****
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle
} from '@/components/ui/sheet'
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { CardHeaderBg } from '@/components/ui/card-header-bg';
import { AppIcon } from '@/components/icons';
import { Show, Index } from 'solid-js';
import { HelperText } from '@/components/ui/helper-text';
// **** Utils ****
import { db } from '@/lib/sync/db';
import { generateId } from '@/lib/utils';
import { toast } from '@/components/ui/toast';
import { createGroupAction } from '@/domain/group/group.actions';
// **** Hooks ****
import { useAppForm } from "@/components/form";
import { useQuery } from '@aboviq/powersync-solid';
// **** Types ****
import type { Accessor, Setter } from "solid-js";
import { CreateGroupFormInput } from "@/domain/group/group.schema";

type CreateGroupFormProps = {
  dialogOpen: Accessor<boolean>
  setDialogOpen: Setter<boolean>
  orgId: string
}

export function CreateGroupForm(props: CreateGroupFormProps) {
  const defaultValues: typeof CreateGroupFormInput.infer = {
    name: '',
    description: '',
    permissions: [{ role: '', team: '' }],
  }

  const createGroupForm = useAppForm(() => ({
    formId: 'create-group-form',
    defaultValues,
    validators: {
      onSubmitAsync: CreateGroupFormInput
    },
    onSubmit: async ({ value, formApi }) => {
      try {
        await createGroupAction({
          ...value,
          id: generateId(),
          organization_id: props.orgId,
          created_at: new Date().toISOString(),
          updated_at: new Date().toISOString()
        })

        formApi.reset()
        props.setDialogOpen(false)
        toast({
          variant: 'success',
          title: "Success",
          description: "Group created successfully"
        })
      } catch (err) {
        console.error(err)
        toast({
          variant: 'error',
          title: "Error",
          description: "Failed to create group"
        })
      }
    }
  }))

  const [teams] = useQuery(
    db.selectFrom('team')
      .select(['id', 'name'])
      .where('organization_id', '=', props.orgId)
  )

  const [roles] = useQuery(
    db.selectFrom('group_role')
      .select(['id', 'name'])
      .where('organization_id', '=', props.orgId)
  )

  const teamOptions = () => teams()?.map(t => ({ label: t.name, value: t.id })) ?? []
  const roleOptions = () => roles()?.map(r => ({ label: r.name, value: r.id })) ?? []

  return (
    <Sheet
      open={props.dialogOpen()}
      onOpenChange={props.setDialogOpen}
    >
      <SheetContent class="sm:min-w-[625px]">
        <CardHeaderBg icon="group-rbac" />
        <SheetHeader>
          <SheetTitle>Create group</SheetTitle>
          <SheetDescription>
            Create a new group and select the appropriate workspaces and roles
            {" "} that should apply across those workspaces
          </SheetDescription>
        </SheetHeader>
        <form
          id={createGroupForm.formId}
          onsubmit={(e) => {
            e.preventDefault()
            e.stopPropagation()
            createGroupForm.handleSubmit()
          }}
          class="grid grid-cols-1 gap-4"
        >
          <createGroupForm.AppField
            name="name"
            children={
              (field) =>
                <field.Input
                  label="Group Name"
                  placeholder='E.g. Legal'
                />
            }
          />
          <createGroupForm.AppField
            name="description"
            children={
              (field) => {
                return (
                  <field.Input
                    label="Description"
                    placeholder='E.g. General group for members of the finance team'
                  />
                )
              }
            }
          />
          <div>
            <div>
              <Label>
                Permissions
              </Label>
              <HelperText class="mt-0">
                Select workspaces and the associated roles for the respective workspaces
              </HelperText>
            </div>
            <createGroupForm.AppField mode="array" name="permissions">
              {(field) => {
                return (
                  <div>
                    <Show when={field().state.value.length > 0}>
                      <Index each={field().state.value}>
                        {(_, i) => (
                          <div class="grid grid-cols-12 gap-4 items-center">
                            <div class="col-span-5">
                              <createGroupForm.AppField
                                name={`permissions[${i}].team`}
                                children={
                                  (subField) =>
                                    <subField.Combobox
                                      options={teamOptions()}
                                      placeholder='Search workspaces'
                                    />
                                }
                              />
                            </div>
                            <div class="col-span-2 flex items-center space-x-2">
                              <hr
                                aria-hidden="true"
                                class="w-full border-t-1 border-dashed border-orange-500 dark:border-white/10 animate-pulse"
                              />
                              <AppIcon name="link" class="size-12 animate-pulse text-brand-primary" />
                              <hr
                                aria-hidden="true"
                                class="w-full border-t-1 border-dashed border-orange-500 dark:border-white/10 animate-pulse"
                              />
                            </div>
                            <div class="col-span-5">
                              <createGroupForm.AppField
                                name={`permissions[${i}].role`}
                                children={
                                  (subField) =>
                                    <subField.Combobox
                                      options={roleOptions()}
                                      placeholder='Search roles'
                                    />
                                }
                              />
                            </div>
                          </div>
                        )}
                      </Index>
                    </Show>
                    <div class="w-full flex justify-center my-4">
                      <Button
                        onclick={() => field().pushValue({ role: '', team: '' })}
                        type="button"
                      >
                        <AppIcon name="add" class="btn-icon" />
                        Add permission
                      </Button>
                    </div>
                  </div>
                )
              }}
            </createGroupForm.AppField>
          </div>
        </form>
        <SheetFooter class="flex-row space-x-2">
          <SheetClose class="w-full">
            <Button
              onclick={() => props.setDialogOpen(false)}
              variant="outline"
              class="w-full"
            >
              Close
            </Button>
          </SheetClose>
          <createGroupForm.AppForm>
            <createGroupForm.SubscribeButton
              formId={createGroupForm.formId}
              label="Create role"
            />
          </createGroupForm.AppForm>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}