import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AlertApi } from '#/api/alert/alert';

import { h, ref } from 'vue';

import { $t } from '#/locales';

export const formData = ref<AlertApi.Alert>();

export function useGridColumns(onActionClick: OnActionClickFn<AlertApi.Alert>) {
  const columns: VxeTableGridOptions<AlertApi.Alert>['columns'] = [
    {
      title: $t('alert.reminderName'),
      field: 'reminderName',
      width: 200,
      showOverflow: true,
    },
    {
      title: $t('alert.expireTime'),
      field: 'expireTime',
      width: 180,
      formatter: ({ cellValue }) => {
        return cellValue ? new Date(cellValue).toLocaleString() : '-';
      },
    },
    {
      title: $t('alert.reminderDays'),
      field: 'reminderDays',
      width: 120,
      formatter: ({ cellValue }) => {
        return cellValue ? `${cellValue}天` : '-';
      },
    },
    {
      title: $t('alert.createTime'),
      field: 'createTime',
      width: 180,
      formatter: ({ cellValue }) => {
        return cellValue ? new Date(cellValue).toLocaleString() : '-';
      },
    },
    {
      title: $t('alert.operation'),
      field: 'actions',
      width: 120,
      fixed: 'right',
      slots: {
        default: ({ row }) => [
          h(
            'div',
            {
              class: 'flex items-center gap-1',
            },
            [
              h(
                'button',
                {
                  class: 'text-primary hover:text-primary-dark',
                  onClick: () => onActionClick({ code: 'edit', row }),
                },
                [
                  h('span', { class: 'i-mdi:pencil text-sm' }),
                  h('span', { class: 'ml-1' }, $t('ui.actionTitle.edit')),
                ],
              ),
              h(
                'button',
                {
                  class: 'text-destructive hover:text-destructive-dark',
                  onClick: () => onActionClick({ code: 'delete', row }),
                },
                [
                  h('span', { class: 'i-mdi:delete text-sm' }),
                  h('span', { class: 'ml-1' }, $t('ui.actionTitle.delete')),
                ],
              ),
            ],
          ),
        ],
      },
    },
  ];

  return columns;
}

export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'reminderName',
      label: $t('alert.reminderName'),
      component: 'Input',
      componentProps: {
        allowClear: true,
      },
    },
    {
      fieldName: 'expireTime',
      label: $t('alert.expireTime'),
      component: 'RangePicker',
      componentProps: {
        allowClear: true,
      },
    },
    {
      fieldName: 'reminderDays',
      label: $t('alert.reminderDays'),
      component: 'Input',
      componentProps: {
        allowClear: true,
      },
    },
    {
      fieldName: 'email',
      label: $t('alert.email'),
      component: 'Input',
      componentProps: {
        allowClear: true,
      },
    },
  ];
}

export function useAlertFormSchema(
  userOptions: any = [],
  daysOptions: any = [],
): VbenFormSchema[] {
  return [
    {
      fieldName: 'id',
      component: 'Input',
      dependencies: {
        triggerFields: [''],
        show: () => false,
      },
    },
    {
      fieldName: 'users',
      label: '提醒人',
      rules: 'required',
      component: 'Select',
      componentProps: {
        placeholder: '请选择提醒人',
        mode: 'multiple',
        allowClear: true,
        showSearch: true,
        filterOption: (input: string, option: any) => {
          return option?.label?.toLowerCase().includes(input.toLowerCase());
        },
        options: userOptions,
      },
    },
    {
      fieldName: 'days',
      label: '提醒天数',
      rules: 'required',
      component: 'Select',
      componentProps: {
        placeholder: '请选择提醒天数',
        mode: 'multiple',
        allowClear: true,
        options: daysOptions,
      },
    },
    {
      fieldName: 'content',
      label: '提醒内容',
      rules: 'required',
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入提醒内容',
        rows: 4,
        showCount: true,
        maxlength: 500,
      },
    },
    {
      fieldName: 'status',
      label: '启用状态',
      component: 'Switch',
      componentProps: {
        checkedChildren: '启用',
        unCheckedChildren: '禁用',
        checkedValue: 1,
        unCheckedValue: 2,
        style: { width: 'auto' },
      },
      defaultValue: 1,
    },
  ];
}
