import DatePicker from "@/components/FormElements/DatePicker/DatePicker";
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import MultiSelect from "@/components/FormElements/MultiSelect";
import { Select } from "@/components/FormElements/select";
import type { DynamicFormSection } from "@/components/forms/DynamicFormBuilder";
import { REGEX } from "@/constants/regex";
import { FormErrorMessages } from "@/constants/Texts";
import type { TCreateNotificationCredentials } from "@/lib/api/types/NotificationHistory";
import type { ILabelValue } from "@/types/shared";
import type { ChangeEvent } from "react";
import { v4 as uuidv4 } from "uuid";

const notificationSectionId = uuidv4();

interface NotificationFormSectionsOptions {
  recipient: ILabelValue[] | null;
  onSelectTarget: (event: ChangeEvent<HTMLSelectElement>) => void;
  onSearchRecipient: (query: string) => void;
  onLoadMoreRecipients: () => void;
  hasMoreRecipients: boolean;
  isLoadingMoreRecipients: boolean;
  isLoadingRecipients: boolean;
  priorities: ILabelValue[];
  targets: ILabelValue[];
  types: ILabelValue[];
  channels: ILabelValue[];
}

export const createNotificationFormSections = ({
  recipient,
  onSelectTarget,
  onSearchRecipient,
  onLoadMoreRecipients,
  hasMoreRecipients,
  isLoadingMoreRecipients,
  isLoadingRecipients,
  priorities,
  targets,
  types,
  channels,
}: NotificationFormSectionsOptions): DynamicFormSection<TCreateNotificationCredentials>[] => [
  {
    id: notificationSectionId,
    title: "Create Notification",
    className: "gap-5",
    fields: [
      {
        kind: "input",
        name: "title",
        label: "Title",
        type: "text",
        placeholder: "Short headline shown to recipients",
        required: true,
        rules: {
          required: { value: true, message: FormErrorMessages.required },
        },
      },
      {
        kind: "custom",
        name: "schedule_at",
        render: ({ control }) => (
          <DatePicker
            control={control}
            name="schedule_at"
            label="schedule at"
            range={false}
            timePicker
          />
        ),
      },
      {
        kind: "custom",
        name: "target",
        render: ({ register, errors }) => (
          <Select<TCreateNotificationCredentials>
            required
            {...register("target", {
              required: {
                value: true,
                message: FormErrorMessages.required,
              },
              onChange: onSelectTarget,
            })}
            errors={errors}
            items={targets}
            label="target"
            placeholder="Choose who this applies to"
            name="target"
          />
        ),
      },
      {
        kind: "custom",
        name: "recipient",
        render: ({ register, errors }) => (
          <MultiSelect<TCreateNotificationCredentials>
            disabled={!recipient}
            required={!!recipient}
            {...register("recipient")}
            errors={errors}
            label="recipient"
            items={recipient ?? []}
            placeholder={
              recipient && recipient.length > 0 ? "Choose recipients" : ""
            }
            name="recipient"
            onSearch={recipient ? onSearchRecipient : undefined}
            onLoadMore={onLoadMoreRecipients}
            hasMore={hasMoreRecipients}
            isLoading={isLoadingRecipients}
            isLoadingMore={isLoadingMoreRecipients}
          />
        ),
      },
      {
        kind: "custom",
        name: "channels",
        render: ({ register, errors }) => (
          <MultiSelect<TCreateNotificationCredentials>
            required
            {...register("channels")}
            errors={errors}
            label="channels"
            items={channels ?? []}
            placeholder="Email, push, or both"
            name="channels"
          />
        ),
      },
      {
        kind: "input",
        name: "link",
        label: "Link",
        type: "url",
        rules: {
          pattern: {
            value: REGEX.URL,
            message: FormErrorMessages.invalidPattern,
          },
        },
      },
      {
        kind: "custom",
        name: "priority",
        render: ({ register, errors }) => (
          <Select<TCreateNotificationCredentials>
            required
            {...register("priority", {
              required: {
                value: true,
                message: FormErrorMessages.required,
              },
            })}
            errors={errors}
            items={priorities}
            label="Priority"
            placeholder="Choose urgency"
            name="priority"
          />
        ),
      },
      {
        kind: "custom",
        name: "type",
        render: ({ register, errors }) => (
          <Select<TCreateNotificationCredentials>
            required
            {...register("type", {
              required: {
                value: true,
                message: FormErrorMessages.required,
              },
            })}
            errors={errors}
            items={types}
            label="type"
            placeholder="Info, warning, alert, or reject"
            name="type"
          />
        ),
      },
      {
        kind: "custom",
        name: "description",
        className: "md:col-span-2",
        render: ({ register, errors }) => (
          <TextAreaGroup<TCreateNotificationCredentials>
            required
            {...register("description", {
              required: {
                value: true,
                message: FormErrorMessages.required,
              },
            })}
            errors={errors}
            label="Description"
            name="description"
            placeholder="Main message — include context and any action needed"
          />
        ),
      },
    ],
  },
];
