import React, { useMemo } from "react";
import { useWatch } from "react-hook-form";
import { useTranslations } from "next-intl";
import { SelectControl } from "@/components/form/control/select.control";
import { SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { TagControl } from "@/components/form/control/tag.control";
import { MediaControl } from "@/components/form/control/media.control";
import { MediaCollection } from "@/components/form/control/media.collection";
import { TagCollection } from "@/components/form/control/tag.collection";
import { CheckboxControl } from "@/components/form/control/checkbox.control";
import { ProfileControl } from "@/components/form/control/profile.control";
import { InputControl } from "@/components/form/control/input.control";
import { DateTimeControl } from "@/components/form/control/date-time.control";
import { createSlug } from "@/lib/utils/create-slug";
import { api } from "@/lib/trpc/client";
import {
    PostType, PostTypeHelpers,
    PostStatusHelpers,
    ProjectStatusEnum, ProjectStatusHelpers,
    ProjectTypeHelpers,
    DistrictsHelpers
} from "@/config/enums";
import { PostStatusEnum } from "@/config/enums/post-status";
import { AccessLevel } from "@/config/enums/access-level";

type PostSidebarFormProps = {
    currentStatus?: PostStatusEnum;
};

export const PostSidebarForm: React.FC<PostSidebarFormProps> = (props) => {
    const { currentStatus } = props;

    const type = useWatch({
        name: "topic"
    });

    const title = useWatch({
        name: "title"
    });

    const t = useTranslations();

    const { data: permittedStatuses = [] } = api.gate.allowedPostStatuses.useQuery();

    const allStatuses = useMemo(() => PostStatusHelpers.values(), []);

    return (
        <div className="space-y-4">
            <SelectControl
              label={t("dashboard.post.editor.fields.status.label")}
              name="status">
                <SelectControl.Trigger className="w-full capitalize">
                    <SelectValue placeholder={t("dashboard.post.editor.fields.status.placeholder")} />
                </SelectControl.Trigger>

                <SelectControl.Content>
                    <SelectControl.Group>
                        {allStatuses.map((status) => {
                            const Icon = PostStatusHelpers.getIcon(status);
                            const isCurrent = currentStatus !== undefined && status === currentStatus;
                            const isAllowed = permittedStatuses.includes(status);
                            const disabled = !isAllowed && !isCurrent;

                            return (
                                <SelectControl.Item
                                  key={status}
                                  value={status}
                                  disabled={disabled}
                                  className="capitalize">
                                    <Icon />

                                    {PostStatusHelpers.translate(t, status)}
                                </SelectControl.Item>
                            );
                        })}
                    </SelectControl.Group>
                </SelectControl.Content>
            </SelectControl>

            <DateTimeControl
              label={t("dashboard.post.editor.fields.publishedAt.label")}
              name="publishedAt" />

            <SelectControl
              label={t("general.post.accessLevel.label")}
              name="accessLevel">
                <SelectControl.Trigger className="w-full">
                    <SelectValue placeholder={t("general.post.accessLevel.placeholder")} />
                </SelectControl.Trigger>

                <SelectControl.Content>
                    <SelectControl.Group>
                        <SelectControl.Item value={AccessLevel.PUBLIC}>
                            {t("general.post.accessLevel.public")}
                        </SelectControl.Item>
                        <SelectControl.Item value={AccessLevel.SUBSCRIBERS}>
                            {t("general.post.accessLevel.subscribers")}
                        </SelectControl.Item>
                        <SelectControl.Item value={AccessLevel.PLUS_ONLY}>
                            {t("general.post.accessLevel.plus_only")}
                        </SelectControl.Item>
                    </SelectControl.Group>
                </SelectControl.Content>
            </SelectControl>

            <SelectControl
              label={t("dashboard.post.editor.fields.type.label")}
              name="topic">
                <SelectTrigger className="w-full">
                    <SelectValue placeholder={t("dashboard.post.editor.fields.type.placeholder")} />
                </SelectTrigger>

                <SelectContent className="max-h-[300px]">
                    {PostTypeHelpers.values().map((type) => (
                        <SelectItem
                          key={type}
                          className="pl-6"
                          value={type}>
                            {PostTypeHelpers.translate(t, type)}
                        </SelectItem>
                    ))}
                </SelectContent>
            </SelectControl>

            {type === PostType.PROJECT && (
                <React.Fragment>
                    <SelectControl label={t("dashboard.project.editor.fields.status.label")} name="project.status">
                        <SelectTrigger className="w-full">
                            <SelectValue placeholder={t("dashboard.project.editor.fields.status.placeholder")} />
                        </SelectTrigger>

                        <SelectContent className="max-h-[300px]">
                            {Object.entries(ProjectStatusEnum).map(([, status]) => {
                                return (
                                    <SelectItem key={status} value={status}>
                                        {ProjectStatusHelpers.getLabel(status)}
                                    </SelectItem>
                                );
                            })}
                        </SelectContent>
                    </SelectControl>

                    <SelectControl label={t("dashboard.project.editor.fields.type.label")} name="project.type">
                        <SelectTrigger className="w-full">
                            <SelectValue placeholder={t("dashboard.project.editor.fields.type.placeholder")} />
                        </SelectTrigger>

                        <SelectContent className="max-h-[300px]">
                            {ProjectTypeHelpers.values().map((projectType) => {
                                return (
                                    <SelectItem key={projectType} value={projectType}>
                                        {ProjectTypeHelpers.getLabel(projectType)}
                                    </SelectItem>
                                );
                            })}
                        </SelectContent>
                    </SelectControl>
                </React.Fragment>
            )}

            <TagControl
              label={t("dashboard.post.editor.fields.primaryTag.label")}
              placeholder={t("dashboard.post.editor.fields.primaryTag.placeholder")}
              name="primaryTagId" />

            <TagCollection
              label={t("dashboard.post.editor.fields.tags.label")}
              placeholder={t("dashboard.post.editor.fields.tags.placeholder")}
              name="tags" />

            <InputControl
              label={t("dashboard.post.editor.fields.rating.label")}
              type="number"
              min={0}
              max={6}
              name="rating" />

            <InputControl
              label={t("dashboard.post.editor.fields.slug.label")}
              placeholder={title ? createSlug(title) : t("dashboard.post.editor.fields.slug.placeholder")}
              name="slug" />

            <CheckboxControl
              label={t("dashboard.post.editor.fields.isSponsored.label")}
              name="isSponsored" />

            {PostTypeHelpers.shouldUsePinnedFromDate(type) && (
                <CheckboxControl
                  label={t("dashboard.post.editor.fields.isPinned.label")}
                  helperText={t("dashboard.post.editor.fields.isPinned.description")}
                  name="isPinned" />
            )}

            <SelectControl
              label={t("dashboard.post.editor.fields.location.label")}
              name="location">
                <SelectTrigger className="w-full">
                    <SelectValue placeholder={t("dashboard.post.editor.fields.location.placeholder")} />
                </SelectTrigger>

                <SelectContent>
                    <SelectGroup>
                        {DistrictsHelpers.values().map((district) => (
                            <SelectItem
                              key={district}
                              value={district}>
                                {DistrictsHelpers.getLabel(district)}
                            </SelectItem>
                        ))}
                    </SelectGroup>
                </SelectContent>
            </SelectControl>

            <ProfileControl
              personal
              label={t("dashboard.post.editor.fields.author.label")}
              name="authorId" />

            {type === PostType.OPINION && (
                <CheckboxControl
                  label={t("dashboard.post.editor.fields.showAuthorPhoto.label")}
                  helperText={t("dashboard.post.editor.fields.showAuthorPhoto.helperText")}
                  name="showAuthorPhoto" />
            )}

            <MediaControl
              autosubmit
              withAttachments
              label={t("dashboard.post.editor.fields.preview.label")}
              name="previewId" />

            <MediaCollection
              label={t("dashboard.post.editor.fields.media.label")}
              name="postMedia"
              preview="previewId" />
        </div>
    );
};