import {getConditions} from '../../utils/getConditions'
import icon from '../../icons/link'
import * as G from '../../groups'
import * as P from '../../preview'
import {mergeConfig} from '../../configStore'
import {radio} from './radio'
import {checkbox} from './checkbox'
import {string} from '../types/string'
import {object} from '../types/object'
import {reference} from '../types/reference'
import {file} from '../types/file'
import {field} from '../field'
import type {LinkField, FieldReturn} from '../../types'

// TODO: Setup rack-pinion.config.js
// const pageTemplates = config?.studio?.docTypes || ['post', 'page']
const pageTemplates = ['post', 'page']

const F = {
  radio,
  checkbox,
  field,
  string,
  object,
  reference,
  file,
}

const defaultProps: Partial<LinkField> = {
  icon,
  name: 'link',
  types: pageTemplates,
  groups: G.fieldGroupComponentOptions(),
  preview: P.link(),
  conditions: {
    internal: [],
    external: [],
    download: [],
  },
  args: {
    condition: {name: 'condition', required: true, group: 'content'},
    url: {
      name: 'url',
      description: 'eg. https://google.com',
      group: 'content',
      hidden: ({parent}) => parent?.condition !== 'external',
    },
    page: {
      name: 'page',
      weak: true,
      options: {disableNew: true},
      group: 'content',
      hidden: ({parent}) => parent?.condition !== 'internal',
    },
    hasHash: {
      name: 'hasHash',
      initialValue: false,
      group: 'content',
      hidden: ({parent}) => parent?.condition !== 'internal',
    },
    hash: {
      name: 'hash',
      group: 'content',
      hidden: ({parent}) => parent?.condition !== 'internal' || parent?.hasHash !== true,
    },
    file: {
      group: 'content',
      hidden: ({parent}) => parent?.condition !== 'download',
    },
    video: {
      group: 'content',
      hidden: ({parent}) => parent?.condition !== 'video',
    },
    label: {
      name: 'label',
      group: 'content',
      hidden: ({parent}) => parent?.condition === 'none',
    },
    linkStyle: {
      name: 'linkStyle',
      initialValue: 'text',
      group: 'options',
      hidden: ({parent}) => parent?.condition === 'none',
    },
    linkSize: {
      name: 'linkSize',
      initialValue: 'normal',
      group: 'options',
      hidden: ({parent}) =>
        parent?.condition === 'none' || !parent?.linkStyle || parent?.linkStyle === 'text',
    },
    target: {
      name: 'target',
      title: 'Open in a New Tab',
      group: 'options',
      hidden: ({parent}) => parent?.condition !== 'external',
    },
  },
}

export const link = (props?: LinkField, mergeProps?: Partial<LinkField>): FieldReturn => {
  const {
    types,
    conditions: _conditions = {},
    fields: _fields = [],
    args = {},
    ...linkProps
  } = mergeConfig('link', props, mergeProps, defaultProps)

  const [conditions, conditionValues] = getConditions(_conditions)

  const fields = [
    F.radio(conditions, args.condition),
    args.url && F.string(args.url),
    args.page && types?.length && F.reference(types, args.page),
    args.hasHash && F.checkbox(args.hasHash),
    args.hash && F.string(args.hash),
    args.file && F.file(args.file),
    args.video && F.field('video', args.video),
    args.label && F.string(args.label),
    args.linkStyle && F.radio(['text', 'button', 'ghost'], args.linkStyle),
    args.linkSize && F.radio(['normal', 'large'], args.linkSize),
    args.target && F.checkbox(args.target),
    ...conditionValues.flat(),
    ..._fields,
  ].filter((field): field is FieldReturn => Boolean(field))

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