import type { FieldType } from './model-fields';

/**
 * Front-end frameworks supported by Stackbit without any additional
 * configuration. For custom front-end framework, specify 'custom' and provide
 * additional options to configure Stackbit.
 */
export const SSG_NAMES = [
    'custom',
    'nextjs',
    'gatsby',
    'jekyll',
    'hugo',
    'eleventy',
    'vuepress',
    'gridsome',
    'nuxt',
    'sapper',
    'hexo',
    'unibit',
    'astro'
] as const;

/**
 * The list of Content Management Systems (CMS) supported by Stackbit.
 * With the introduction of custom Content-Sources, there is no need to specify
 * 'cmsName' anymore.
 */
export const CMS_NAMES = ['git', 'contentful', 'sanity', 'forestry', 'netlifycms'] as const;

export const FIELD_TYPE: { [Type in FieldType as Type extends 'cross-reference' ? 'crossReference' : Type]: Type } = {
    string: 'string',
    url: 'url',
    slug: 'slug',
    text: 'text',
    markdown: 'markdown',
    html: 'html',
    number: 'number',
    boolean: 'boolean',
    enum: 'enum',
    date: 'date',
    datetime: 'datetime',
    color: 'color',
    image: 'image',
    file: 'file',
    json: 'json',
    richText: 'richText',
    object: 'object',
    model: 'model',
    reference: 'reference',
    crossReference: 'cross-reference',
    style: 'style',
    list: 'list'
} as const;

export const FIELD_TYPES = [
    'string',
    'url',
    'slug',
    'text',
    'markdown',
    'html',
    'number',
    'boolean',
    'enum',
    'date',
    'datetime',
    'color',
    'image',
    'file',
    'json',
    'richText',
    'object',
    'model',
    'reference',
    'cross-reference',
    'style',
    'list'
] as const;

export const STYLE_PROPS = [
    'objectFit',
    'objectPosition',
    'flexDirection',
    'justifyContent',
    'justifyItems',
    'justifySelf',
    'alignContent',
    'alignItems',
    'alignSelf',
    'padding',
    'margin',
    'width',
    'height',
    'fontFamily',
    'fontSize',
    'fontStyle',
    'fontWeight',
    'textAlign',
    'textColor',
    'textDecoration',
    'backgroundColor',
    'backgroundPosition',
    'backgroundSize',
    'borderRadius',
    'borderWidth',
    'borderColor',
    'borderStyle',
    'boxShadow',
    'opacity'
] as const;

export const STYLE_PROPS_VALUES = {
    nineRegions: ['top', 'center', 'bottom', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom'],
    objectFit: ['none', 'contain', 'cover', 'fill', 'scale-down'],
    flexDirection: ['row', 'row-reverse', 'col', 'col-reverse'],
    justifyContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
    justifyItems: ['start', 'end', 'center', 'stretch'],
    justifySelf: ['auto', 'start', 'end', 'center', 'stretch'],
    alignContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch'],
    alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
    alignSelf: ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
    width: ['auto', 'narrow', 'wide', 'full'],
    height: ['auto', 'full', 'screen'],
    fontStyle: ['normal', 'italic'],
    fontWeight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
    textAlign: ['left', 'center', 'right', 'justify'],
    textDecoration: ['none', 'underline', 'line-through'],
    backgroundSize: ['auto', 'cover', 'contain'],
    borderRadius: ['none', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'full'],
    borderStyle: ['solid', 'dashed', 'dotted', 'double', 'none'],
    boxShadow: ['none', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'inner']
};

export const RICH_TEXT_NODE_TYPES = {
    DOCUMENT: 'document',
    PARAGRAPH: 'p',
    HEADING_1: 'h1',
    HEADING_2: 'h2',
    HEADING_3: 'h3',
    HEADING_4: 'h4',
    HEADING_5: 'h5',
    HEADING_6: 'h6',
    OL: 'ol',
    UL: 'ul',
    LIST_ITEM: 'li',
    HR: 'hr',
    BLOCKQUOTE: 'blockquote',
    LINK: 'a',
    REFERENCE: 'reference'
} as const;

export const RICH_TEXT_MARK_TYPES = {
    BOLD: 'bold',
    ITALIC: 'italic',
    UNDERLINE: 'underline',
    CODE: 'code'
} as const;

export const RICH_TEXT_HINT_MAX_LENGTH = 200;

export const ICONS = [
    'arrow-up',
    'arrow-down',
    'arrow-left',
    'arrow-right',
    'chevron-left',
    'chevron-right',
    'chevron-up',
    'chevron-down',
    'text',
    'bold',
    'italic',
    'list',
    'list-ol',
    'list-check',
    'align-left',
    'align-center',
    'align-right',
    'align-justify',
    'ellipsis-vertical',
    'ellipsis',
    'copy',
    'paste',
    'pencil',
    'circle-info',
    'circle-exclamation',
    'grid-dots-vertical',
    'xmark',
    'plus',
    'minus',
    'magnifying-glass',
    'palette',
    'circle-question',
    'lock',
    'comment-quote',
    'trash',
    'check',
    'grid-2',
    'arrow-up-from-square',
    'eye',
    'arrows-rotate',
    'image',
    'up-right-and-down-left-from-center',
    'calendar',
    'arrow-rotate-right',
    'arrow-up-from-bracket',
    'arrow-down-arrow-up',
    'flag',
    'globe',
    'bell',
    'user',
    'users',
    'user-plus',
    'user-minus',
    'envelope',
    'clock',
    'gear',
    'camera-movie',
    'filter',
    'arrow-up-right-from-square',
    'memo',
    'long-text',
    'screen-size',
    'gem',
    'bookmark',
    'table-list',
    'paperclip',
    'fill-drip',
    'badge',
    'undo',
    'redo',
    'section',
    'post',
    'page',
    'arrow-left-from-bracket',
    'integration',
    'bars',
    'link',
    'list-tree',
    'code',
    'layer-group',
    'angles-right',
    'credit-card',
    'thumbtack',
    'star',
    'star-full',
    'sparkles',
    'sparkles-full',
    'layout',
    'chart-arrow-up-right'
] as const;