import { format, parseISO } from 'date-fns'
import { TiPuzzleOutline } from 'react-icons/ti'
import { IoDocumentOutline } from 'react-icons/io5'

import { defineField, defineType } from 'sanity'

//pagebuilder schema
import authorType from '../author'

export default defineType({
  name: 'culturalSection',
  title: 'Cultural Section',
  icon: IoDocumentOutline,
  type: 'document',

  fields: [
    defineField({
      name: 'title',
      title: 'Section Name',
      description: 'Nama section di halaman homepage',
      type: 'string',
      // validation: Rule => Rule.required().min(10).max(80)
    }),

    defineField({
      name: 'heading',
      title: 'Heading',
      description: 'Heading dari section ini',
      type: 'string',
      // validation: Rule => Rule.required().min(10).max(80)
    }),

    defineField({
      name: 'subheading',
      title: 'Sub heading',
      description: 'Sub Heading dari section ini',
      type: 'string',
    }),

    defineField({
      name: 'mainimage',
      title: 'Image',
      type: 'image',
      description: 'Gambar banner untuk baris pertama section ini',
      options: {
        hotspot: true,
      },
      fields: [
        {
          title: 'Alternative Text',
          name: 'alt',
          type: 'string',
        },
      ],
    }),

    defineField({
      title: 'URL',
      name: 'url',
      type: 'string',
      description: 'Link halaman target',
    }),

    defineField({
      type: 'object',
      name: 'bannerSatu',
      description: 'Banner pertama dari tiga kolom banner pada section ini',
      fieldsets: [{ name: 'bannerSatuContent', title: 'Content' }],
      options: {
        collapsible: false, // Makes the whole fieldset collapsible
        collapsed: false, // Defines if the fieldset should be collapsed by default or not
      },
      fields: [
        defineField({
          title: 'Heading',
          name: 'heading',
          description: 'Heading Banner Satu',
          type: 'string',
          //fieldset: 'bannerSatuContent',

          // validation: Rule => Rule.required().min(10).max(80)
        }),
        {
          name: 'image',
          title: 'Image',
          type: 'image',
          description: 'Image untuk Banner Satu',
          fields: [
            {
              title: 'Alternative Text',
              name: 'alt',
              type: 'string',
            },
          ],
          //fieldset: 'bannerSatuContent',
          // validation: Rule => Rule.required().min(10).max(80)
        },
        {
          title: 'URL',
          name: 'urlbanner',
          description: 'Link halaman target',
          type: 'string',
          fieldset: 'bannerSatuContent',
        },
      ],
    }),

    defineField({
      type: 'object',
      name: 'bannerDua',
      description: 'Banner ke-2 dari tiga kolom banner pada section ini',
      fieldsets: [{ name: 'bannerDuaContent', title: 'Content' }],
      options: {
        collapsible: false, // Makes the whole fieldset collapsible
        collapsed: false, // Defines if the fieldset should be collapsed by default or not
        //columns: 2, // Defines a grid for the fields and how many columns it should have
      },
      fields: [
        defineField({
          title: 'Heading',
          name: 'heading',
          description: 'Heading Banner Dua',
          type: 'string',
          fieldset: 'bannerDuaContent',
        }),
        {
          type: 'image',
          title: 'Image',
          name: 'image',
          description: 'Image untuk Banner Dua',
          fieldset: 'bannerDuaContent',
          fields: [
            {
              title: 'Alternative Text',
              name: 'alt',
              type: 'string',
            },
          ],
        },
        {
          title: 'URL',
          name: 'urlbanner',
          type: 'string',
          description: 'Link halaman target',
          fieldset: 'bannerDuaContent',
        },
      ],
    }),

    defineField({
      type: 'object',
      name: 'bannerTiga',
      description: 'Banner ke-3 dari tiga kolom banner pada section ini',
      fieldsets: [{ name: 'bannerTigaContent', title: 'Content' }],
      options: {
        collapsible: false, // Makes the whole fieldset collapsible
        collapsed: false, // Defines if the fieldset should be collapsed by default or not
        //columns: 2, // Defines a grid for the fields and how many columns it should have
      },
      fields: [
        defineField({
          title: 'Heading',
          name: 'heading',
          description: 'Heading Banner Tiga',
          type: 'string',
          fieldset: 'bannerTigaContent',
        }),
        {
          type: 'image',
          title: 'Image',
          name: 'image',
          description: 'Image untuk Banner Tiga',
          fieldset: 'bannerTigaContent',
          fields: [
            {
              title: 'Alternative Text',
              name: 'alt',
              type: 'string',
            },
          ],
        },
        {
          title: 'URL',
          name: 'urlbanner',
          type: 'string',
          description: 'Link halaman target',
          fieldset: 'bannerTigaContent',
        },
      ],
    }),

    defineField({
      // set this to hidden
      name: 'date',
      title: 'Date',
      type: 'datetime',
      initialValue: () => new Date().toISOString(),
    }),

    defineField({
      name: 'author',
      title: 'Author',
      type: 'reference',
      to: [{ type: authorType.name }],
    }),
  ],

  preview: {
    select: {
      title: 'title',
      author: 'author.name',
      date: 'date',
      media: 'coverImage',
    },
    prepare({ title, media, author, date }) {
      const subtitles = [
        author && `by ${author}`,
        date && `on ${format(parseISO(date), 'LLL d, yyyy')}`,
      ].filter(Boolean)

      return { title, media, subtitle: subtitles.join(' ') }
    },
  },
})