import { defineArrayMember, defineField, defineType } from "sanity";

const submenuItemFields = [
  defineField({
    name: "label",
    title: "Libelle",
    type: "string",
    validation: (rule) => rule.required(),
  }),
  defineField({
    name: "href",
    title: "Lien",
    type: "string",
    validation: (rule) => rule.required(),
  }),
  defineField({
    name: "isVisible",
    title: "Visible",
    type: "boolean",
    initialValue: true,
  }),
  defineField({
    name: "openInNewTab",
    title: "Ouvrir dans un nouvel onglet",
    type: "boolean",
    initialValue: false,
  }),
] as const;

export const menuSettings = defineType({
  name: "menuSettings",
  title: "Menu",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Titre interne",
      type: "string",
      initialValue: "Menu principal",
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: "items",
      title: "Elements du menu",
      type: "array",
      description: "Reordonnez, renommez, masquez ou ajoutez les liens de navigation.",
      of: [
        defineArrayMember({
          type: "object",
          name: "menuItem",
          title: "Element menu",
          fields: [
            defineField({
              name: "label",
              title: "Libelle",
              type: "string",
              validation: (rule) => rule.required(),
            }),
            defineField({
              name: "href",
              title: "Lien",
              type: "string",
              description: "Ex: /showroom, /en-savoir-plus ou https://...",
              validation: (rule) => rule.required(),
            }),
            defineField({
              name: "kind",
              title: "Type",
              type: "string",
              initialValue: "link",
              options: {
                list: [
                  { title: "Lien simple", value: "link" },
                  { title: "Boutique avec sous-menu", value: "shopDropdown" },
                ],
                layout: "radio",
              },
            }),
            defineField({
              name: "isVisible",
              title: "Visible",
              type: "boolean",
              initialValue: true,
            }),
            defineField({
              name: "openInNewTab",
              title: "Ouvrir dans un nouvel onglet",
              type: "boolean",
              initialValue: false,
              hidden: ({ parent }) => parent?.kind === "shopDropdown",
            }),
            defineField({
              name: "children",
              title: "Sous-menu",
              type: "array",
              description: "Ajoutez ici les liens enfants de cet element.",
              of: [
                defineArrayMember({
                  type: "object",
                  name: "submenuItem",
                  title: "Sous-element",
                  fields: [...submenuItemFields],
                  preview: {
                    select: {
                      title: "label",
                      subtitle: "href",
                      isVisible: "isVisible",
                    },
                    prepare: ({ title, subtitle, isVisible }) => ({
                      title: title || "Sous-element",
                      subtitle: `${isVisible === false ? "Masque - " : ""}${subtitle || ""}`,
                    }),
                  },
                }),
              ],
            }),
          ],
          preview: {
            select: {
              title: "label",
              subtitle: "href",
              kind: "kind",
              isVisible: "isVisible",
              children: "children",
            },
            prepare: ({ title, subtitle, kind, isVisible, children }) => ({
              title: title || "Element menu",
              subtitle: `${kind === "shopDropdown" ? "Boutique" : "Lien"}${Array.isArray(children) && children.length ? ` - ${children.length} sous-elements` : ""}${isVisible === false ? " - masque" : ""}${subtitle ? ` - ${subtitle}` : ""}`,
            }),
          },
        }),
      ],
    }),
  ],
  preview: {
    select: {
      title: "title",
    },
  },
});