import icon from '../../icons/image'
import videoIcon from '../../icons/video'
import * as G from '../../groups'
import {getConditions} from '../../utils/getConditions'
import startCase from 'lodash/startCase'
import {radio} from './radio'
import {image as _image} from '../types/image'
import {string} from '../types/string'
import {object} from '../types/object'
import {field} from '../field'
import type {MediaField, FieldReturn} from '../../types'
import {mergeConfig} from '../../configStore'

const F = {
  radio,
  image: _image,
  string,
  field,
  object,
}

const defaultFields: Partial<MediaField> = {
  icon,
  name: 'media',
  groups: G.fieldGroupComponentOptions(),
  conditions: {
    image: [],
    video: [],
  },
  args: {
    image: {group: 'content', hidden: ({parent}) => parent?.condition !== 'image'},
    video: {group: 'content', hidden: ({parent}) => parent?.condition !== 'video'},
    caption: {
      name: 'caption',
      group: 'content',
      hidden: ({parent}) => parent?.condition === 'none',
    },
    ratio: {
      name: 'ratio',
      group: 'options',
      hidden: ({parent}) => parent?.condition === 'none' || parent?.condition === 'lottie',
    },
  },
  preview: {
    select: {
      condition: 'condition',
      image: 'image',
      video: 'video',
      url: 'url',
      ratio: 'ratio',
      caption: 'caption',
    },
    prepare: ({condition, image, url, ratio, caption}) => ({
      title: url || startCase(condition) || 'Media (Empty)',
      subtitle: caption || ratio || '',
      media: condition === 'image' ? image || icon : videoIcon,
    }),
  },
}

export const media = (props?: MediaField, mergeProps?: Partial<MediaField>): FieldReturn => {
  const {
    fields: _fields = [],
    conditions: _conditions = {},
    args = {},
    ...mediaProps
  } = mergeConfig('media', props, mergeProps, defaultFields)

  const [conditions, conditionValues] = getConditions(_conditions)

  const fields = [
    F.radio(conditions, {
      name: 'condition',
      title: 'Type',
      group: 'content',
      initialValue: 'image',
    }),
    args.image && F.image(args.image),
    args.video && F.field('video', args.video),
    args.caption && F.string(args.caption),
    args.ratio && F.string(args.ratio),
    ...conditionValues.flat(),
    ..._fields,
  ].filter(Boolean)

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