import * as api from "./api";
import { useI18n } from "/src/locales";
import { Ref, ref } from "vue";
import { useRouter } from "vue-router";
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
import { Modal, notification } from "ant-design-vue";
//@ts-ignore
import yaml from "js-yaml";

export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const router = useRouter();
  const { t } = useI18n();

  let lastType = "";
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    if (lastType && lastType != query?.query?.type) {
      query.page.offset = 0;
    }
    lastType = query?.query?.type;
    return await api.GetList(query);
  };
  const editRequest = async ({ form, row }: EditReq) => {
    form.id = row.id;
    const res = await api.UpdateObj(form);
    return res;
  };
  const delRequest = async ({ row }: DelReq) => {
    return await api.DelObj(row.id);
  };

  const addRequest = async ({ form }: AddReq) => {
    const res = await api.AddObj(form);
    return res;
  };

  const selectedRowKeys: Ref<any[]> = ref([]);
  context.selectedRowKeys = selectedRowKeys;
  const { openCrudFormDialog } = useFormWrapper();

  async function openImportDialog() {
    function createCrudOptions() {
      return {
        crudOptions: {
          columns: {
            content: {
              title: t("certd.pluginFile"),
              type: "text",
              form: {
                component: {
                  name: "pem-input",
                  vModel: "modelValue",
                  textarea: {
                    rows: 8,
                  },
                },
                col: {
                  span: 24,
                },
                helper: t("certd.selectPluginFile"),
              },
            },
            override: {
              title: t("certd.overrideSameName"),
              type: "dict-switch",
              dict: dict({
                data: [
                  {
                    value: true,
                    label: t("certd.override"),
                  },
                  {
                    value: false,
                    label: t("certd.noOverride"),
                  },
                ],
              }),
              form: {
                value: false,
                col: {
                  span: 24,
                },
                helper: t("certd.overrideHelper"),
              },
            },
          },
          form: {
            wrapper: {
              title: t("certd.importPlugin"),
              saveRemind: false,
            },
            afterSubmit() {
              notification.success({ message: t("certd.operationSuccess") });
              crudExpose.doRefresh();
            },
            async doSubmit({ form }: any) {
              return await api.ImportPlugin({
                ...form,
              });
            },
          },
        },
      };
    }
    const { crudOptions } = createCrudOptions();
    await openCrudFormDialog({ crudOptions });
  }
  return {
    crudOptions: {
      settings: {
        plugins: {
          rowSelection: {
            enabled: true,
            order: -2,
            before: true,
            props: {
              multiple: true,
              crossPage: true,
              selectedRowKeys,
            },
          },
        },
      },
      request: {
        pageRequest,
        addRequest,
        editRequest,
        delRequest,
      },
      actionbar: {
        buttons: {
          add: {
            show: true,
            icon: "ion:ios-add-circle-outline",
            text: t("certd.customPlugin"),
          },
          import: {
            show: true,
            icon: "ion:cloud-upload-outline",
            text: t("certd.import"),
            type: "primary",
            async click() {
              await openImportDialog();
            },
          },
        },
      },
      rowHandle: {
        show: true,
        minWidth: 200,
        fixed: "right",
        buttons: {
          edit: {
            show: compute(({ row }) => {
              return row.type === "custom";
            }),
          },
          copy: {
            show: compute(({ row }) => {
              return row.type === "custom";
            }),
          },
          remove: {
            order: 999,
            show: compute(({ row }) => {
              return row.type === "custom";
            }),
          },
          export: {
            text: null,
            icon: "ion:cloud-download-outline",
            title: t("certd.export"),
            type: "link",
            show: compute(({ row }) => {
              return row.type === "custom";
            }),
            async click({ row }) {
              const content = await api.ExportPlugin(row.id);
              if (content) {
                const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
                const url = URL.createObjectURL(blob);
                const link = document.createElement("a");
                link.href = url;
                link.download = `${row.name}.yaml`;
                link.click();
                URL.revokeObjectURL(url);
              }
            },
          },
        },
      },
      table: {
        rowKey: "name",
      },
      tabs: {
        name: "type",
        show: true,
        defaultOption: {
          show: false,
        },
      },
      form: {
        onSuccess(opts: any) {
          if (opts.res?.id) {
            router.push({
              name: "SysPluginEdit",
              query: {
                id: opts.res.id,
              },
            });
          }
        },
      },
      columns: {
        pluginType: {
          title: t("certd.pluginType"),
          type: "dict-select",
          search: {
            show: true,
          },
          form: {
            order: 0,
            rules: [{ required: true }],
            component: {
              disabled: true,
            },
          },
          addForm: {
            component: {
              disabled: false,
            },
          },
          dict: dict({
            data: [
              { label: t("certd.auth"), value: "access" },
              { label: t("certd.dns"), value: "dnsProvider" },
              { label: t("certd.deployPlugin"), value: "deploy" },
            ],
          }),
          column: {
            width: 100,
            align: "center",
            component: {
              color: "auto",
            },
          },
        },
        icon: {
          title: t("certd.icon"),
          type: "icon",
          form: {
            rules: [{ required: true }],
          },
          column: {
            width: 70,
            align: "center",
            component: {
              name: "fs-icon",
              vModel: "icon",
              style: {
                fontSize: "22px",
              },
            },
          },
        },
        name: {
          title: t("certd.pluginName"),
          type: "text",
          search: {
            show: true,
          },
          form: {
            show: true,
            helper: t("certd.pluginNameHelper"),
            rules: [
              { required: true },
              {
                type: "regexp",
                pattern: /^[a-zA-Z][a-zA-Z0-9]+$/,
                message: t("certd.pluginNameRuleMsg"),
              },
            ],
          },
          column: {
            width: 250,
            cellRender({ row }) {
              if (row.author) {
                return <fs-copyable model-value={`${row.author}/${row.name}`} />;
              } else {
                return <fs-copyable model-value={row.name} />;
              }
            },
          },
        },
        author: {
          title: t("certd.author"),
          type: "text",
          search: {
            show: true,
          },
          form: {
            show: true,
            helper: t("certd.authorHelper"),
            rules: [
              { required: true },
              {
                type: "regexp",
                pattern: /^[a-zA-Z][a-zA-Z0-9]+$/,
                message: t("certd.authorRuleMsg"),
              },
            ],
          },
          column: {
            width: 200,
            show: false,
          },
        },
        title: {
          title: t("certd.titlea"),
          type: "text",
          form: {
            helper: t("certd.titleHelper"),
            rules: [{ required: true }],
          },
          column: {
            width: 300,
            cellRender({ row }) {
              if (row.type === "custom") {
                return <router-link to={`/sys/plugin/edit?id=${row.id}`}>{row.title}</router-link>;
              }
              return <div>{row.title}</div>;
            },
          },
        },
        desc: {
          title: t("certd.description"),
          type: "textarea",
          helper: t("certd.descriptionHelper"),
          column: {
            width: 300,
            show: false,
          },
        },
        type: {
          title: t("certd.sourcee"),
          type: "dict-select",
          search: {
            show: true,
          },
          form: {
            value: "custom",
            component: {
              disabled: true,
            },
          },
          dict: dict({
            data: [
              { label: t("certd.builtIn"), value: "builtIn" },
              { label: t("certd.custom"), value: "custom" },
              { label: t("certd.store"), value: "store" },
            ],
          }),
          column: {
            width: 70,
            align: "center",
            component: {
              color: "auto",
            },
          },
        },
        version: {
          title: t("certd.version"),
          type: "text",
          column: {
            width: 100,
            align: "center",
          },
        },
        "extra.dependPlugins": {
          title: t("certd.pluginDependencies"),
          type: "text",
          form: {
            component: {
              name: "a-select",
              mode: "tags",
              open: false,
              allowClear: true,
            },
            helper: t("certd.pluginDependenciesHelper"),
          },
          column: {
            show: false,
          },
        },
        "extra.showRunStrategy": {
          title: t("certd.editableRunStrategy"),
          type: "dict-switch",
          dict: dict({
            data: [
              { value: true, label: t("certd.editable") },
              { value: false, label: t("certd.notEditable") },
            ],
          }),
          form: {
            value: false,
            rules: [{ required: true }],
          },
          column: {
            width: 100,
            align: "left",
            show: false,
          },
        },
        "extra.default.strategy.runStrategy": {
          title: t("certd.runStrategy"),
          type: "dict-select",
          dict: dict({
            data: [
              { value: 0, label: t("certd.normalRun") },
              { value: 1, label: t("certd.skipOnSuccess") },
            ],
          }),
          form: {
            value: 1,
            rules: [{ required: true }],
            helper: t("certd.defaultRunStrategyHelper"),
            show: compute(({ form }) => {
              return form.extra.showRunStrategy;
            }),
          },
          column: {
            width: 100,
            align: "left",
            component: {
              color: "auto",
            },
            show: false,
          },
          valueBuilder({ row }) {
            if (row.extra) {
              row.extra = yaml.load(row.extra);
            }
          },
          valueResolve({ row }) {
            if (row.extra) {
              row.extra = yaml.dump(row.extra);
            }
          },
        },
        disabled: {
          title: t("certd.enableDisable"),
          type: "dict-switch",
          dict: dict({
            data: [
              { label: t("certd.enabled"), value: false, color: "success" },
              { label: t("certd.disabled"), value: true, color: "error" },
            ],
          }),
          form: {
            title: t("certd.enableDisable"),
            value: false,
          },
          column: {
            width: 120,
            align: "center",
            component: {
              title: t("certd.clickToToggle"),
              on: {
                async click({ value, row }) {
                  Modal.confirm({
                    title: t("certd.confirm"),
                    content: `${t("certd.confirmToggle")} ${!value ? t("certd.disable") : t("certd.enable")}?`,
                    onOk: async () => {
                      await api.SetDisabled({
                        id: row.id,
                        name: row.name,
                        type: row.type,
                        disabled: !value,
                      });
                      await crudExpose.doRefresh();
                    },
                  });
                },
              },
            },
          },
        },
        group: {
          title: t("certd.pluginGroup"),
          type: "dict-select",
          dict: dict({
            url: "/pi/plugin/groupsList",
            label: "title",
            value: "key",
          }),
          form: {
            rules: [{ required: true }],
            show: compute(({ form }) => {
              return form.pluginType === "deploy";
            }),
          },
          column: {
            width: 100,
            align: "left",
            component: {
              color: "auto",
            },
          },
        },
        createTime: {
          title: t("certd.createTime"),
          type: "datetime",
          form: {
            show: false,
          },
          column: {
            sorter: true,
            width: 160,
            align: "center",
          },
        },
        updateTime: {
          title: t("certd.updateTime"),
          type: "datetime",
          form: {
            show: false,
          },
          column: {
            show: true,
          },
        },
      },
    },
  };
}