import {isEmpty, isEqual} from 'licia'
import React from 'react'
import {useParams} from 'react-router'
import styled from 'styled-components'
import {amisRender, commonInfo, horizontalFormOptions} from '../../../../util/amis.tsx'
import {generateInputForm, typeMap} from '../InputSchema.tsx'

const TemplateEditDiv = styled.div`
    .antd-EditorControl {
        min-height: 500px !important;
    }
`

const FlowTaskTemplateEdit: React.FC = () => {
  const {template_id} = useParams()
  const preloadTemplateId = isEqual(template_id, '-1') ? undefined : template_id
  return (
    <TemplateEditDiv className="task-template-edit h-full">
      {amisRender({
        type: 'page',
        title: '模板编辑',
        body: {
          debug: commonInfo.debug,
          type: 'form',
          api: {
            method: 'POST',
            url: `${commonInfo.baseAiUrl}/flow_task/template/save`,
            data: {
              id: '${id|default:undefined}',
              name: '${name}',
              description: '${description}',
              inputSchema: '${inputSchema|default:undefined}',
            },
          },
          initApi: preloadTemplateId
            ? `get:${commonInfo.baseAiUrl}/flow_task/template/detail/${preloadTemplateId}`
            : undefined,
          wrapWithPanel: false,
          ...horizontalFormOptions(),
          onEvent: {
            change: {
              actions: [
                {
                  actionType: 'validate',
                },
                {
                  actionType: 'custom',
                  // @ts-ignore
                  script: (context, doAction, event) => {
                    let data = event?.data ?? {}
                    let inputSchema = data.inputSchema ?? []
                    if (!isEmpty(inputSchema) && isEmpty(data?.validateResult?.error ?? undefined)) {
                      doAction({
                        actionType: 'setValue',
                        args: {
                          value: {
                            inputPreview: generateInputForm(inputSchema, '入参表单预览'),
                          },
                        },
                      })
                    }
                  },
                },
              ],
            },
          },
          body: [
            {
              type: 'hidden',
              name: 'id',
            },
            {
              type: 'input-text',
              name: 'name',
              label: '名称',
              required: true,
              clearable: true,
              maxLength: 10,
              showCounter: true,
            },
            {
              type: 'textarea',
              name: 'description',
              label: '描述',
              required: true,
              clearable: true,
              maxLength: 500,
              showCounter: true,
            },
            {
              type: 'group',
              body: [
                {
                  type: 'wrapper',
                  size: 'none',
                  body: [
                    {
                      type: 'input-kvs',
                      name: 'inputSchema',
                      label: '输入变量',
                      addButtonText: '新增入参',
                      draggable: false,
                      keyItem: {
                        label: '参数名称',
                        ...horizontalFormOptions(),
                        validations: {
                          isAlphanumeric: true,
                        },
                      },
                      valueItems: [
                        {
                          ...horizontalFormOptions(),
                          type: 'input-text',
                          name: 'label',
                          required: true,
                          label: '中文名称',
                          clearValueOnEmpty: true,
                          clearable: true,
                        },
                        {
                          ...horizontalFormOptions(),
                          type: 'input-text',
                          name: 'description',
                          label: '参数描述',
                          clearValueOnEmpty: true,
                          clearable: true,
                        },
                        {
                          ...horizontalFormOptions(),
                          type: 'select',
                          name: 'type',
                          label: '参数类型',
                          required: true,
                          selectFirst: true,
                          options: Object.keys(typeMap).map(key => ({label: typeMap[key], value: key})),
                        },
                        {
                          ...horizontalFormOptions(),
                          type: 'switch',
                          name: 'required',
                          label: '是否必填',
                          required: true,
                          value: true,
                        },
                      ],
                    },
                  ],
                },
                {
                  type: 'amis',
                  name: 'inputPreview',
                },
              ],
            },
            {
              type: 'button-toolbar',
              buttons: [
                {
                  type: 'submit',
                  label: '提交',
                  level: 'primary',
                },
                {
                  type: 'reset',
                  label: '重置',
                },
              ],
            },
          ],
        },
      })}
    </TemplateEditDiv>
  )
}

export default FlowTaskTemplateEdit