import { h } from 'vue';
import { NInput } from 'naive-ui';
import type { FormSchema } from '@/components/zt/Form/types/form';
import CustomIconSelect from '@/components/custom/custom-icon-select.vue';
import { icons } from './icons';
const LAYOUT_PREFIX = 'layout.';
const VIEW_PREFIX = 'view.';
const FIRST_LEVEL_ROUTE_COMPONENT_SPLIT = '$';

export function getLayoutAndPage(component?: string | null) {
  let layout = '';
  let page = '';

  const [layoutOrPage = '', pageItem = ''] = component?.split(FIRST_LEVEL_ROUTE_COMPONENT_SPLIT) || [];

  layout = getLayout(layoutOrPage);
  page = getPage(pageItem || layoutOrPage);

  return { layout, page };
}

function getLayout(layout: string) {
  return layout.startsWith(LAYOUT_PREFIX) ? layout.replace(LAYOUT_PREFIX, '') : '';
}

function getPage(page: string) {
  return page.startsWith(VIEW_PREFIX) ? page.replace(VIEW_PREFIX, '') : '';
}

export function transformLayoutAndPageToComponent(layout: string, page: string) {
  const hasLayout = Boolean(layout);
  const hasPage = Boolean(page);

  if (hasLayout && hasPage) {
    return `${LAYOUT_PREFIX}${layout}${FIRST_LEVEL_ROUTE_COMPONENT_SPLIT}${VIEW_PREFIX}${page}`;
  }

  if (hasLayout) {
    return `${LAYOUT_PREFIX}${layout}`;
  }

  if (hasPage) {
    return `${VIEW_PREFIX}${page}`;
  }

  return '';
}

/**
 * Get route name by route path
 *
 * @param routeName
 */
export function getRoutePathByRouteName(routeName: string) {
  return `/${routeName.replace(/_/g, '/')}`;
}

/**
 * Get path param from route path
 *
 * @param routePath route path
 */
export function getPathParamFromRoutePath(routePath: string) {
  const [path, param = ''] = routePath.split('/:');

  return {
    path,
    param
  };
}

/**
 * Get route path with param
 *
 * @param routePath route path
 * @param param path param
 */
export function getRoutePathWithParam(routePath: string, param: string) {
  if (param.trim()) {
    return `${routePath}/:${param}`;
  }

  return routePath;
}

export const formSchems: FormSchema[] = [
  {
    field: 'id',
    label: '',
    show: false,
    component: 'NInput'
  },

  {
    label: '菜单类型',
    field: 'type',
    component: 'NRadioGroup',
    defaultValue: 'CATALOG',
    required: true,
    componentProps: {
      options: [
        {
          label: '目录',
          value: 'CATALOG'
        },
        {
          label: '菜单',
          value: 'MENU'
        },
        {
          label: '按钮',
          value: 'BUTTON'
        }
      ]
    }
  },
  {
    label: '上级菜单',
    field: 'parentId',
    slot: 'parentId',
    component: 'NTreeSelect',
    defaultValue: 0
  },
  {
    label: '菜单名称',
    field: 'name',
    component: 'NInput',
    required: true
  },
  {
    label: '前端组件',
    field: 'component',
    component: 'NInput',
    required: true,
    componentProps: {
      disabled: true,
      placeholder: '输入路由名称自动生成'
    },
    ifShow({ model }) {
      return model.type != 'BUTTON';
    }
  },

  {
    label: '路由名称',
    field: 'path',
    component: 'NInput',
    required: true,
    ifShow({ model }) {
      return model.type != 'BUTTON';
    },
    render({ model, field }) {
      return h(NInput, {
        icons,
        value: model[field],
        'onUpdate:value': value => {
          model[field] = value;
        },
        onInput: value => {
          if (model.type == 'MENU') {
            const cop = model.parentId
              ? `view.${value.replace(/^\//, '').replace(/\//g, '_')}`
              : `layout.base$view.${value.replace(/^\//, '')}`;
            model.component = cop;
          } else {
            model.component = 'layout.base';
          }
        }
      });
    }
  },

  {
    label: '排序',
    field: 'sort',
    component: 'NInputNumber',
    defaultValue: 1,
    required: true
  },
  {
    label: '授权标识',
    field: 'perm',
    component: 'NInput'
  },
  {
    label: '图标',
    field: 'icon',
    component: 'NSelect',
    required: true,
    defaultValue: '',
    render({ model, field }) {
      return h(CustomIconSelect, {
        icons,
        value: model[field],
        'onUpdate:value': value => {
          model[field] = value;
        }
      });
    },
    ifShow({ model }) {
      return model.type != 'BUTTON';
    }
  },
  {
    label: '隐藏菜单',
    field: 'visible',
    component: 'NRadioGroup',
    required: true,
    defaultValue: 1,
    ifShow({ model }) {
      return model.type != 'BUTTON';
    },
    componentProps: {
      options: [
        {
          label: '是',
          value: 0
        },
        {
          label: '否',
          value: 1
        }
      ]
    }
  }
];
