const bgDefault = {
  color: '',
  image: '',
  position: 'center top',
  repeat: 'no-repeat',
  attachment: 'fixed',
  size: '100%',
  origin: '',
}

const opts = (pairs) => pairs.map(([value, label]) => ({ label, value }))

// 与 Settings ThemeSearch::background_css() 的白名单一致。
const bgField = (key, label, help) => ({
  key,
  label,
  type: 'fieldset',
  default: { ...bgDefault },
  help,
  fields: [
    { key: 'color', label: '背景颜色', type: 'color', default: '' },
    { key: 'image', label: '背景图片', type: 'media', default: '' },
    { key: 'position', label: '背景位置', type: 'select', default: 'center top', options: opts([
      ['', '默认'], ['left top', '左上'], ['left center', '左中'], ['left bottom', '左下'],
      ['center top', '中上'], ['center center', '居中'], ['center bottom', '中下'],
      ['right top', '右上'], ['right center', '右中'], ['right bottom', '右下'],
    ]) },
    { key: 'repeat', label: '背景重复', type: 'select', default: 'no-repeat', options: opts([
      ['', '默认'], ['repeat', '重复'], ['no-repeat', '不重复'], ['repeat-x', '水平重复'], ['repeat-y', '垂直重复'],
    ]) },
    { key: 'attachment', label: '背景附着', type: 'select', default: 'fixed', options: opts([
      ['', '默认'], ['scroll', '滚动'], ['fixed', '固定'],
    ]) },
    { key: 'size', label: '背景尺寸', type: 'select', default: '100%', options: opts([
      ['', '默认'], ['100%', '100%'], ['cover', '覆盖 (cover)'], ['contain', '包含 (contain)'], ['auto', '自动 (auto)'],
    ]) },
    { key: 'origin', label: '背景原点', type: 'select', default: '', options: opts([
      ['', '默认'], ['padding-box', 'Padding Box'], ['border-box', 'Border Box'], ['content-box', 'Content Box'],
    ]) },
  ],
})

// palette 的 label 即色块背景色；ff1856 的色块沿用参考主题的 #fd2760。
const SKIN_PALETTE = [
  ['ff1856', '#fd2760'], ['f04494', '#f04494'], ['ae53f3', '#ae53f3'], ['627bf5', '#627bf5'],
  ['00a2e3', '#00a2e3'], ['16b597', '#16b597'], ['36af18', '#36af18'], ['8fb107', '#8fb107'],
  ['b18c07', '#b18c07'], ['e06711', '#e06711'], ['f74735', '#f74735'],
].map(([value, label]) => ({ label, value }))

export const layoutSchema = {
  key: 'global.layout',
  title: '显示 & 布局',
  icon: 'fa fas fa-desktop',
  description: '全局布局风格、颜色方案、字体设置。',
  defaults: {
    theme_mode: 'time-auto',
    theme_mode_button: ['pc_nav', 'm_menu'],
    theme_img_bg: { ...bgDefault },
    dark_theme_img_bg: { ...bgDefault },
    theme_skin_custom: '',
    theme_skin: 'f04494',
    dark_theme_skin_custom: '',
    close_backdrop: false,
    theme_main_radius: 8,
    container_max_width: 1200,
    sidebar_enabled: true,
    sidebar_position: 'right',
    sidebar_width: 311,
    sidebar_home_enabled: true,
    sidebar_category_enabled: true,
    sidebar_tag_enabled: true,
    sidebar_single_enabled: true,
    sidebar_page_enabled: true,
    sidebar_search_enabled: true,
    font_family: 'system',
    font_family_custom: '',
    qj_loading: false,
    qj_dh_xs: 'no1',
  },
  groups: [
    {
      key: 'loading-animation',
      title: '加载动画',
      icon: 'fa fas fa-spinner',
      fields: [
        { key: 'qj_loading', label: '全站加载动画', type: 'switch', default: false, help: '开启后页面加载时显示全屏加载动画覆盖层' },
        {
          key: 'qj_dh_xs',
          label: '加载动画样式',
          type: 'select',
          default: 'no1',
          dependsOn: { key: 'qj_loading', value: true },
          options: [
            { label: '样式 1', value: 'no1' },
            { label: '样式 2', value: 'no2' },
            { label: '样式 3', value: 'no3' },
            { label: '样式 4', value: 'no4' },
            { label: '样式 5', value: 'no5' },
            { label: '样式 6', value: 'no6' },
            { label: '样式 7', value: 'no7' },
            { label: '样式 8', value: 'no8' },
            { label: '样式 9', value: 'no9' },
            { label: '样式 10', value: 'no10' },
          ],
          help: '10 种加载动画样式可选',
        },
      ],
    },
    {
      key: 'color',
      title: '色彩方案',
      icon: 'fa fas fa-paint-brush',
      fields: [
        {
          key: 'theme_mode',
          label: '主题模式',
          type: 'radio',
          default: 'time-auto',
          options: [
            { label: '日间亮色主题', value: 'white-theme' },
            { label: '夜间深色主题', value: 'dark-theme' },
            { label: '早晚8点自动切换', value: 'time-auto' },
          ],
          help: '此处设置为默认风格，实际显示风格以用户设置优先。如需固定风格，则关闭还需下方主题切换按钮',
        },
        {
          key: 'theme_mode_button',
          label: '主题切换按钮',
          type: 'checkbox',
          default: ['pc_nav', 'm_menu'],
          options: [
            { label: 'PC端顶部导航', value: 'pc_nav' },
            { label: '移动端弹出菜单', value: 'm_menu' },
          ],
          help: '如果关闭此功能，则前端不会显示切换按钮',
        },
        bgField('theme_img_bg', '全局背景图', '注意：要达到良好的效果需要图片与参数配合，同时需注意颜色搭配！配合不好容易降低显示美感'),
        bgField('dark_theme_img_bg', '夜间模式背景图', '如未设置夜间模式背景图，则夜间模式也显示上方背景图'),
        { key: 'theme_skin_custom', label: '全局主题色', type: 'color', default: '', help: '默认主题高亮颜色。如需选择下方预置颜色，请先清空上方颜色' },
        {
          key: 'theme_skin',
          label: ' ',
          type: 'palette',
          default: 'f04494',
          dependsOn: { key: 'theme_skin_custom', operator: 'empty' },
          options: SKIN_PALETTE,
        },
        { key: 'dark_theme_skin_custom', label: '夜间模式主题色', type: 'color', default: '', help: '在此可单独设置夜间模式的高亮色，清空此处则使用上方默认高亮色' },
        { key: 'close_backdrop', label: '全局关闭背景高斯模糊', type: 'switch', default: false, help: '在支持的浏览器上部分UI(例如导航栏)会显示背景高斯模糊的特效，但此功能比较消耗浏览器性能。同时系统会自动检测用户浏览器性能情况，如果性能较差，将自动关闭此特效，以提供更流畅的体验' },
        { key: 'theme_main_radius', label: '卡片圆角', type: 'spinner', default: 8, min: 0, max: 30, step: 1, unit: 'PX', description: '页面卡片的圆角尺寸' },
      ],
    },
    {
      key: 'layout',
      title: '布局设置',
      icon: 'fa fas fa-columns',
      fields: [
        { key: 'container_max_width', label: '内容最大宽度', type: 'number', default: 1200, min: 1200, max: 2200, step: 50, unit: 'PX', help: '页面布局的最大宽度，可设置 1200–2200PX。宽度过大会造成显示不协调，非特殊需求请勿调整。' },
        { key: 'sidebar_enabled', label: '开启侧边栏', type: 'switch', default: true },
        { key: 'sidebar_position', label: '侧边栏位置', type: 'radio', default: 'right', dependsOn: { key: 'sidebar_enabled', value: true }, options: [
          { label: '左侧', value: 'left' },
          { label: '右侧', value: 'right' },
        ]},
        { key: 'sidebar_width', label: '侧边栏宽度 (px)', type: 'number', default: 300, min: 200, max: 400, step: 10, dependsOn: { key: 'sidebar_enabled', value: true } },
      ],
    },
    {
      key: 'sidebar-scope',
      title: '侧边栏显示范围',
      icon: 'fa fas fa-th-list',
      fields: [
        { key: 'sidebar_home_enabled', label: '首页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
        { key: 'sidebar_category_enabled', label: '分类页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
        { key: 'sidebar_tag_enabled', label: '标签页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
        { key: 'sidebar_single_enabled', label: '文章页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
        { key: 'sidebar_page_enabled', label: '页面侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
        { key: 'sidebar_search_enabled', label: '搜索页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
      ],
    },
    {
      key: 'typography',
      title: '字体设置',
      icon: 'fa fas fa-font',
      fields: [
        { key: 'font_family', label: '正文字体', type: 'select', default: 'system', options: [
          { label: '系统默认', value: 'system' },
          { label: '思源黑体', value: 'noto-sans-sc' },
          { label: '思源宋体', value: 'noto-serif-sc' },
          { label: '自定义', value: 'custom' },
        ], help: '思源字体不会远程加载，访客设备未安装时回退到系统字体。' },
        { key: 'font_family_custom', label: '自定义字体', type: 'input', default: '', placeholder: '例如："LXGW WenKai", "PingFang SC", sans-serif', dependsOn: { key: 'font_family', value: 'custom' }, help: 'CSS font-family 字体栈，多个字体用英文逗号分隔；留空使用系统字体。' },
      ],
    },
  ],
}