/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */

import React from 'react'

import { FaImages } from 'react-icons/fa'
import { IconContext } from 'react-icons'

export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',
      // Styles let you set what your user can mark up blocks with. These
      // corrensponds with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: 'Normal', value: 'normal' },
        { title: 'Titel', value: 'h2' },
      ],
      lists: [{ title: 'Bullet', value: 'bullet' }],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
            title: 'Internal link',
            name: 'internalLink',
            type: 'object',
            blockEditor: {
              icon: () => '🔗',
            },
            fields: [
              {
                name: 'page',
                type: 'string',
                options: {
                  list: [
                    { title: 'Homepage', value: '/' },
                    { title: 'Über uns', value: '/über-uns' },
                    { title: 'Rezepte', value: '/rezepte' },
                    { title: 'Aktuelles', value: '/aktuelles' },
                    { title: 'Depotstandorte', value: '/depotstandorte' },
                  ],
                },
              },
            ],
          },
          {
            title: 'External Link',
            name: 'link',
            type: 'object',
            blockEditor: {
              icon: () => '🌍',
            },
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
              },
            ],
          },
          {
            title: 'Link zu Rezept',
            name: 'linkRecipe',
            type: 'object',
            blockEditor: {
              icon: () => '👩‍🍳',
            },
            fields: [
              {
                name: 'reference',
                type: 'reference',
                to: [{ type: 'recipe' }],
              },
            ],
          },
        ],
      },
    },
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    {
      type: 'object',
      title: 'Gallery',
      name: 'gallery',
      icon: FaImages,
            /* preview: {
        component: () => <h2>📷 Gallery</h2>,
      }, */
      preview: {
        select: {
          photos: 'photos',
        },
        component: ({ value }) => (
          <IconContext.Provider
            value={{
              style: { verticalAlign: 'middle', fontSize: '32px' },
            }}
          >
            <strong>
              <FaImages /> Foto-Gallery mit {value.photos.length}
              Foto(s)
            </strong>
          </IconContext.Provider>
        ),
      },
      fields: [
        {
          name: 'photos',
          type: 'array',
          title: 'Fotos',

          of: [{ type: 'photo' }],
          options: {
            layout: 'grid',
          },
        },
      ],
    },
  ],
}