import icon from '../../icons/image'
import {define} from '../../groups/define'
import {richText} from '../../preview/richText'
import {string} from '../types/string'
import {object} from '../types/object'
import {field} from '../field'
import {link} from './link'
import {radio} from './radio'
import {media as _media} from './media'
import {mergeConfig} from '../../configStore'
import type {HeroField, FieldReturn} from '../../types'

const F = {
  string,
  object,
  field,
  media: _media,
  link,
  radio,
}

const defaultProps: Partial<HeroField> = {
  icon,
  name: 'hero',
  groups: [
    define('content', {title: 'Content', default: true}),
    define('media', {title: 'Media'}),
    define('options', {title: 'Options'}),
  ],
  options: {
    collapsible: true,
    collapsed: true,
  },
  args: {
    label: {name: 'label', group: 'content'},
    heading: {name: 'heading', group: 'content'},
    content: {name: 'content', group: 'content'},
    link: {
      name: 'link',
      conditions: {none: []},
      initialValue: {condition: 'none'},
      group: 'content',
    },
    media: {
      conditions: {none: []},
      initialValue: {condition: 'none'},
      args: {caption: false},
      group: 'media',
    },
    align: {name: 'align', title: 'Content Alignment', initialValue: 'left', group: 'options'},
  },
  preview: {
    select: {
      heading: 'heading',
      content: 'content',
      media: 'media',
    },
    prepare({heading = 'Hero', content, media}) {
      return {
        title: heading,
        subtitle: content ? richText(content) : '',
        media: media?.condition === 'image' ? media.image : null,
      }
    },
  },
}

export const hero = (props?: HeroField, mergeProps?: Partial<HeroField>): FieldReturn => {
  const {
    fields: _fields = [],
    args = {},
    ...heroProps
  } = mergeConfig('hero', props, mergeProps, defaultProps)

  const fields = [
    args.label && F.string(args.label),
    args.heading && F.string(args.heading),
    args.content && F.field('blockContentSimple', args.content),
    args.link && F.link(args.link),
    args.media && F.media(args.media),
    args.align && F.radio(['left', 'center', 'right'], args.align),
    ..._fields,
  ].filter((field): field is FieldReturn => Boolean(field))

  return F.object({
    fields,
    ...heroProps,
  })
}