import { OverflowTooltip } from '@tidb-cloud/ui-components/components/Text'
import {
  Input,
  Select,
  Grid,
  Accordion,
  Flex,
  Box,
  Typography,
  Divider,
  HoverCard,
  Textarea,
  TextareaProps,
  TextInputProps,
  Anchor,
  List,
  Button,
  TextInput
} from '@tidbcloud/uikit'
import { Dot, FormTextInput, CodeBlock } from '@tidbcloud/uikit/biz'
import { createStyles } from '@tidbcloud/uikit/emotion'
import { usePrevious } from '@tidbcloud/uikit/hooks'
import { IconCheck, IconInfoCircle, IconMinusCircle } from '@tidbcloud/uikit/icons'
import { useEffect } from 'react'
import { FormProvider } from 'react-hook-form'

import { useDataApiContext } from '../context'
import { getCachedParams } from '../helpers'
import { EndPoint, ParamType } from '../types'

import { AccordionWrap } from './common'

const ParamsDescription = () => {
  return (
    <Box>
      <Typography variant="body-sm">
        Parameters allow dynamic value replacement in your queries, either in the URL or request body.
      </Typography>
      <List
        size="sm"
        my={4}
        styles={(theme) => ({
          item: {
            color: theme.colors.carbon[8],
            '*': {
              paddingRight: 4,
              wordBreak: 'break-word'
            }
          }
        })}
      >
        <List.Item>
          <Typography variant="body-sm">
            Supported types (string, number, boolean, integer, and array) and default values can be configured here.
          </Typography>
        </List.Item>
        <List.Item>
          <Typography variant="body-sm">
            Request body parameters apply only to specific request methods such as POST and PUT.
          </Typography>
        </List.Item>
      </List>
      <Typography variant="body-sm">
        Explore our
        <Anchor
          href="https://docs.pingcap.com/tidbcloud/data-service-manage-endpoint#configure-parameters"
          target="_blank"
          mx={4}
        >
          documentation
        </Anchor>
        for detailed usage guidance.
      </Typography>
    </Box>
  )
}

const EmptyTips = () => {
  const codeParamName = '${year}'
  const paramName = '${param_name}'
  const code = `SELECT *
FROM
  sample_data.global_fortune_500_2018_2022
WHERE
  year = ${codeParamName}`

  return (
    <Box p="32px 16px 0">
      <Typography variant="title-sm" mb={12}>
        What's this for?
      </Typography>
      <ParamsDescription />
      <Box my={24}>
        <Typography variant="title-sm" mb={12}>
          How does this work?
        </Typography>
        <Typography variant="body-sm">
          Declare the parameter by entering "{paramName}" in the editor panel, and it will show up immediately for
          further configurations.
        </Typography>

        <Typography variant="body-sm">
          Learn more about{' '}
          <a
            target="_blank"
            href="https://docs.pingcap.com/tidbcloud/data-service-manage-endpoint#configure-parameters"
            rel="noreferrer"
          >
            configuring parameters
          </a>
          .
        </Typography>
      </Box>

      <CodeBlock language="sql" codeHighlightProps={{ styles: { code: { fontSize: 12 } } }}>
        {code}
      </CodeBlock>
    </Box>
  )
}

const LeftBorderContent: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
  return (
    <Flex align="center">
      <Dot color="carbon" ml={-2} w={6} h={6} mr={4} />
      {children}
    </Flex>
  )
}

const useStyles = createStyles((theme) => ({
  overflowText: {
    display: 'inline-block',
    width: '90%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  },
  testValueItem: {
    position: 'relative',
    '&:before': {
      content: '""',
      width: 2,
      height: 20,
      background: theme.colors.carbon[5],
      position: 'absolute',
      left: 0,
      top: -14
    }
  }
}))

const TextareaParam = (props: TextareaProps) => {
  return (
    <Textarea
      styles={{
        root: {
          width: '60%'
        },
        input: {
          height: 22,
          minHeight: 22,
          padding: 8,
          paddingTop: '4px !important',
          paddingBottom: '4px !important',
          lineHeight: '18px',
          fontSize: 12
        }
      }}
      autosize
      {...props}
    />
  )
}

export const InputParam = (props: TextInputProps) => {
  return (
    <TextInput
      styles={{
        root: {
          width: '60%'
        },
        input: {
          height: 22,
          minHeight: 22,
          lineHeight: '18px',
          fontSize: 12,
          paddingLeft: 8,
          paddingRight: 8
        }
      }}
      {...props}
    />
  )
}

const Params = () => {
  const {
    paramsList,
    setParamsList,
    batchParamsList,
    setBatchParamsList,
    ParamsFormMethods,
    editEndpoint,
    setEditEndpoint,
    editEndpointRef,
    systemValues,
    setSystemValues,
    cachedTestValues
  } = useDataApiContext()
  const { classes } = useStyles()
  const preEditEndpoint = usePrevious(editEndpoint)

  const changed = () => {
    const endpoint = {
      ...editEndpoint,
      has_modified: true
    } as EndPoint
    setEditEndpoint(endpoint)
    editEndpointRef.current = endpoint
  }

  // cache test value when endpoint changed
  // system value(page, page_size), params, batch params
  useEffect(() => {
    if (!editEndpoint?.id) {
      return
    }

    if (preEditEndpoint?.id && preEditEndpoint.args) {
      cachedTestValues.current = {
        ...cachedTestValues.current,
        [preEditEndpoint.id]: {
          paramsList: paramsList,
          batchParamsList: batchParamsList,
          systemValue: systemValues
        }
      }
    }

    ParamsFormMethods.reset()
    const { values, batchValues, sysValues } = getCachedParams(editEndpoint, cachedTestValues.current)
    setParamsList(values)
    setBatchParamsList(batchValues)
    setSystemValues(sysValues)

    setTimeout(() => {
      paramValueChanged(values, sysValues, batchValues)
    }, 0)
  }, [editEndpoint?.id])

  const paramValueChanged = (paramsList: ParamType[], systemValues: string[], batchValues: ParamType[]) => {
    paramsList
      .concat(
        editEndpoint?.settings?.enable_pagination
          ? ([
              {
                name: 'page',
                value: systemValues?.length && systemValues[0]
              },
              {
                name: 'page_size',
                value: systemValues?.length > 1 && systemValues[1]
              }
            ] as ParamType[])
          : []
      )
      .forEach((param, index) => {
        ParamsFormMethods.setValue(`testValue_${index}`, param.value || '')
      })

    editEndpoint?.batch &&
      batchValues.forEach((param, index) => {
        ParamsFormMethods.setValue(`testValue_batch_${index}`, param.value || '')
      })
  }

  const autoFillTestValues = () => {
    ParamsFormMethods.clearErrors()

    const params = [...paramsList]
    params.forEach((param) => {
      if (param.value) {
        return
      }

      if (param.type !== 'array') {
        const val = getValueByType(param.type, param.name)
        param.value = val
      } else {
        param.value = getValueByType(param.item_type, param.name)
      }
    })
    setParamsList(params)

    const systemVal = [...systemValues]
    if (editEndpoint?.settings?.enable_pagination) {
      !systemVal[0] && (systemVal[0] = getValueByType('integer', ''))
      !systemVal[1] && (systemVal[1] = getValueByType('integer', ''))
      setSystemValues(systemVal)
    }

    if (editEndpoint?.batch) {
      const batchList = [...batchParamsList]
      batchList.forEach((param) => {
        if (param.value) {
          return
        }

        if (param.type !== 'array') {
          const val = getValueByType(param.type, param.name)
          param.value = val
        } else {
          param.value = getValueByType(param.item_type, param.name)
        }
      })
      setBatchParamsList(batchList)
    }

    paramValueChanged(params, systemVal, batchParamsList)
  }

  const cleanTestValues = () => {
    const params = [...paramsList]
    params.forEach((param) => {
      param.value = ''
    })
    setParamsList(params)

    const systemVal = [...systemValues]
    if (editEndpoint?.settings?.enable_pagination) {
      systemVal[0] = ''
      systemVal[1] = ''
      setSystemValues(systemVal)
    }

    if (editEndpoint?.batch) {
      const batchList = [...batchParamsList]
      batchList.forEach((param) => {
        param.value = ''
      })
      setBatchParamsList(batchList)
    }

    paramValueChanged(params, systemVal, batchParamsList)
  }

  const getValueByType = (type: string, name: string) => {
    switch (type) {
      // string number boolean integer array
      case 'integer':
      case 'number':
        return '1'
      case 'boolean':
        return 'false'
      case 'string':
        return `test_${name}`
      default:
        return ''
    }
  }

  return (
    <Box fz={12} data-guide="definition">
      {!!(paramsList.length || editEndpoint?.settings?.enable_pagination) && (
        <AccordionWrap defaultValue="definition">
          <Accordion.Item value="definition">
            <Accordion.Control>
              <Flex align="center">
                <Typography variant="title-sm">Definition</Typography>
                <HoverCard width={320} withArrow position="top" shadow="md">
                  <HoverCard.Target>
                    <Box component={IconInfoCircle} size={14} c="carbon.8" ml={2} sx={{ cursor: 'pointer' }}></Box>
                  </HoverCard.Target>
                  <HoverCard.Dropdown>
                    <ParamsDescription />
                  </HoverCard.Dropdown>
                </HoverCard>
              </Flex>
            </Accordion.Control>
            <Accordion.Panel sx={{ maxHeight: 530, overflowY: 'auto', scrollbarWidth: 'none' }}>
              {!!paramsList.length && (
                <Typography variant="label-sm" c="carbon.7" px={16} pt={12}>
                  User Defined Parameters
                </Typography>
              )}
              {paramsList.map((param, index) => {
                const isPathParams = (editEndpoint?.endpoint ?? '').indexOf(`/{${param.name}}`) >= 0
                return (
                  <Box
                    sx={(theme) => ({
                      padding: '0 16px',
                      borderBottom: index === paramsList.length - 1 ? '' : `1px solid ${theme.colors.carbon[5]}`
                    })}
                    key={param.name}
                  >
                    <Flex align="center" my={8} justify="space-between">
                      <Box
                        sx={{
                          flex: 1,
                          whiteSpace: 'nowrap',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          display: 'flex',
                          alignItems: 'center'
                        }}
                      >
                        <OverflowTooltip
                          label={<Box>{param.name}</Box>}
                          minWidth={220}
                          withArrow
                          className={classes.overflowText}
                        >
                          <Box
                            px={8}
                            sx={(t) => ({
                              fontWeight: 700,
                              fontSize: 12,
                              display: 'inline-block',
                              verticalAlign: 'middle',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              whiteSpace: 'nowrap',
                              maxWidth: '100%',
                              background: t.colors.carbon[5],
                              borderTopRightRadius: t.defaultRadius,
                              borderBottomRightRadius: t.defaultRadius
                            })}
                          >
                            {param.name}
                          </Box>
                        </OverflowTooltip>
                      </Box>

                      <Button
                        variant="default"
                        size="xs"
                        h={22}
                        onClick={() => {
                          if (isPathParams) {
                            return
                          }

                          const required = param.required
                          const list = paramsList.slice()
                          list[index].required = required ? 0 : 1
                          list[index].default = ''
                          setParamsList(list)
                          const batchList = batchParamsList.slice()
                          batchList[index].required = required ? 0 : 1
                          batchList[index].default = ''
                          setBatchParamsList(batchList)
                          changed()
                          ParamsFormMethods.clearErrors()
                        }}
                      >
                        <Flex align="center" gap={4} sx={{ position: 'relative' }}>
                          {param.required || isPathParams ? (
                            <IconCheck size={10} strokeWidth={3} />
                          ) : (
                            <IconMinusCircle size={10} strokeWidth={2} />
                          )}
                          Required
                        </Flex>
                      </Button>
                    </Flex>

                    <Flex align="center" justify="space-between" className={classes.testValueItem}>
                      <LeftBorderContent>
                        <Typography>Type</Typography>
                      </LeftBorderContent>
                      <Select
                        size="xs"
                        placeholder="Type"
                        styles={() => ({
                          root: {
                            width: '60%'
                          },
                          input: {
                            height: 22,
                            minHeight: 22,
                            lineHeight: '18px',
                            fontSize: 12
                          }
                        })}
                        data={[
                          { value: 'string', label: 'STRING' },
                          { value: 'integer', label: 'INTEGER' }
                        ].concat(
                          isPathParams
                            ? []
                            : [
                                { value: 'number', label: 'NUMBER' },
                                { value: 'boolean', label: 'BOOLEAN' },
                                { value: 'array', label: 'ARRAY' }
                              ]
                        )}
                        value={param.type}
                        onChange={(val) => {
                          const list = paramsList.slice()
                          list[index].type = `${val}`
                          list[index].item_type = val === 'array' ? 'string' : ''
                          setParamsList(list)
                          const batchList = batchParamsList.slice()
                          batchList[index].type = `${val}`
                          batchList[index].item_type = val === 'array' ? 'string' : ''
                          setBatchParamsList(batchList)
                          changed()
                        }}
                      />
                    </Flex>

                    {['string', 'integer', 'number'].includes(param.type) && (
                      <Flex align="center" justify="space-between" mt={8} className={classes.testValueItem}>
                        <LeftBorderContent>
                          <Flex align="center">
                            <Typography>Enum Value</Typography>
                            <HoverCard width={320} withArrow position="top" shadow="md">
                              <HoverCard.Target>
                                <Box
                                  component={IconInfoCircle}
                                  size={14}
                                  c="carbon.8"
                                  ml={2}
                                  sx={{ cursor: 'pointer' }}
                                ></Box>
                              </HoverCard.Target>
                              <HoverCard.Dropdown>
                                <Typography variant="body-sm">
                                  Optional, multiple values are separated by commas.
                                </Typography>
                              </HoverCard.Dropdown>
                            </HoverCard>
                          </Flex>
                        </LeftBorderContent>
                        <InputParam
                          placeholder="Input Enum Value"
                          value={param.enum || ''}
                          disabled={isPathParams}
                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                            const list = paramsList.slice()
                            const val = e.target.value
                            list[index].enum = `${val}`
                            setParamsList(list)
                            const batchList = batchParamsList.slice()
                            batchList[index].enum = `${val}`
                            setBatchParamsList(batchList)
                            changed()
                          }}
                        />
                      </Flex>
                    )}

                    {param.type === 'array' && (
                      <Flex align="center" justify="space-between" mt={8} className={classes.testValueItem}>
                        <LeftBorderContent>
                          <Typography>ItemType</Typography>
                        </LeftBorderContent>
                        <Select
                          size="xs"
                          styles={() => ({
                            root: {
                              width: '60%'
                            },
                            input: {
                              height: 22,
                              minHeight: 22,
                              lineHeight: '22px'
                            }
                          })}
                          data={[
                            { value: 'string', label: 'STRING' },
                            { value: 'number', label: 'NUMBER' },
                            { value: 'integer', label: 'INTEGER' }
                          ]}
                          value={param.item_type}
                          onChange={(val) => {
                            const list = paramsList.slice()
                            list[index].item_type = `${val}`
                            setParamsList(list)
                            const batchList = batchParamsList.slice()
                            batchList[index].item_type = `${val}`
                            setBatchParamsList(batchList)
                            changed()
                          }}
                        ></Select>
                      </Flex>
                    )}

                    <Flex
                      align="center"
                      m="8px 0"
                      justify="space-between"
                      wrap="nowrap"
                      className={classes.testValueItem}
                    >
                      <LeftBorderContent>
                        <Typography>Default Value</Typography>
                      </LeftBorderContent>
                      <Input
                        disabled={param.required}
                        placeholder={param.type === 'array' ? 'Separated by comas' : 'Input default value'}
                        styles={() => ({
                          wrapper: {
                            width: '60%'
                          },
                          input: {
                            height: 22,
                            minHeight: 22,
                            lineHeight: '18px',
                            fontSize: 12,
                            paddingLeft: 8,
                            paddingRight: 8
                          }
                        })}
                        value={param.default}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                          const list = paramsList.slice()
                          list[index].default = e.target.value
                          setParamsList(list)
                          const batchList = batchParamsList.slice()
                          batchList[index].default = e.target.value
                          setBatchParamsList(batchList)
                          changed()
                          ParamsFormMethods.clearErrors()
                        }}
                      />
                    </Flex>

                    <Flex
                      align="center"
                      m="8px 0"
                      justify="space-between"
                      wrap="nowrap"
                      className={classes.testValueItem}
                    >
                      <LeftBorderContent>
                        <Flex align="center">
                          <Typography>Description</Typography>
                          <HoverCard width={300} withArrow position="top" shadow="md">
                            <HoverCard.Target>
                              <Box
                                component={IconInfoCircle}
                                size={14}
                                c="carbon.8"
                                ml={2}
                                sx={{ cursor: 'pointer' }}
                              ></Box>
                            </HoverCard.Target>
                            <HoverCard.Dropdown>
                              <Typography variant="body-sm">
                                Provide a description for the Data App, this will be used as description of API
                                documentation.
                              </Typography>
                            </HoverCard.Dropdown>
                          </HoverCard>
                        </Flex>
                      </LeftBorderContent>
                      <TextareaParam
                        maxRows={3}
                        placeholder="max 1000 characters"
                        maxLength={1000}
                        value={param.description}
                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
                          const list = paramsList.slice()
                          list[index].description = e.target.value
                          setParamsList(list)

                          const batchList = batchParamsList.slice()
                          batchList[index].description = e.target.value
                          setBatchParamsList(batchList)
                          changed()
                        }}
                      />
                    </Flex>

                    <Flex
                      align="center"
                      m="8px 0"
                      justify="space-between"
                      wrap="nowrap"
                      className={classes.testValueItem}
                    >
                      <LeftBorderContent>
                        <Typography>Location</Typography>
                      </LeftBorderContent>
                      <Input
                        disabled
                        styles={() => ({
                          wrapper: {
                            width: '60%'
                          },
                          input: {
                            height: 22,
                            minHeight: 22,
                            lineHeight: '18px',
                            fontSize: 12,
                            paddingLeft: 8,
                            paddingRight: 8
                          }
                        })}
                        value={
                          isPathParams
                            ? 'Path'
                            : ['GET', 'DELETE'].includes(editEndpoint?.method ?? '')
                              ? 'Query'
                              : 'Body'
                        }
                      />
                    </Flex>
                  </Box>
                )
              })}

              {!!editEndpoint?.settings?.enable_pagination && (
                <AccordionWrap defaultValue="systemValue">
                  <Accordion.Item value="systemValue">
                    <Accordion.Control>
                      <Typography variant="label-sm" c="carbon.7">
                        System Parameters
                      </Typography>
                    </Accordion.Control>

                    <Accordion.Panel>
                      {['page', 'page_size'].map((param) => (
                        <Grid gutter="xs" key={param} my={12} px={16} m={0}>
                          <Grid.Col span={5} p={0}>
                            {param}
                          </Grid.Col>
                          <Grid.Col span={7} p={0}>
                            <Select
                              size="xs"
                              styles={() => ({
                                input: {
                                  height: 22,
                                  minHeight: 22,
                                  lineHeight: '22px'
                                }
                              })}
                              data={[{ value: 'integer', label: 'INTEGER' }]}
                              value="integer"
                              disabled
                            ></Select>
                          </Grid.Col>
                        </Grid>
                      ))}
                    </Accordion.Panel>
                  </Accordion.Item>
                </AccordionWrap>
              )}
            </Accordion.Panel>
          </Accordion.Item>
        </AccordionWrap>
      )}

      {!!(paramsList.length || editEndpoint?.settings?.enable_pagination) && (
        <AccordionWrap defaultValue="testValue">
          <Accordion.Item value="testValue">
            <Accordion.Control>
              <Flex align="center">
                <Typography variant="title-sm">Test Values</Typography>
                {editEndpoint?.batch && (
                  <HoverCard width={320} withArrow position="top" shadow="md">
                    <HoverCard.Target>
                      <Box component={IconInfoCircle} size={14} c="carbon.8" ml={2} sx={{ cursor: 'pointer' }}></Box>
                    </HoverCard.Target>
                    <HoverCard.Dropdown>
                      <Typography variant="body-sm">
                        When batch operation is turned on, you can enter two sets of test data
                      </Typography>
                    </HoverCard.Dropdown>
                  </HoverCard>
                )}
              </Flex>
            </Accordion.Control>
            <Accordion.Panel>
              <Flex gap={12} px={16} mt={8} mb={16}>
                <Button size="xs" variant="default" h={22} onClick={autoFillTestValues}>
                  Auto-Fill dummy test data
                </Button>
                <Button size="xs" variant="default" h={22} onClick={cleanTestValues}>
                  <Typography variant="label-sm">Clean</Typography>
                </Button>
              </Flex>

              <FormProvider {...ParamsFormMethods}>
                <form onSubmit={() => {}}>
                  {paramsList
                    .concat(
                      editEndpoint?.settings?.enable_pagination
                        ? ([
                            {
                              name: 'page',
                              type: 'integer',
                              value: systemValues?.length && systemValues[0],
                              required: false
                            },
                            {
                              name: 'page_size',
                              type: 'integer',
                              value: systemValues?.length > 1 && systemValues[1],
                              required: false
                            }
                          ] as ParamType[])
                        : []
                    )
                    .map((param, index) => (
                      <Grid
                        gutter="sm"
                        key={param.name}
                        sx={() => ({
                          padding: '0 16px',
                          margin: '12px 0'
                        })}
                      >
                        <Grid.Col
                          span={5}
                          p={0}
                          sx={{
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis'
                          }}
                        >
                          <OverflowTooltip
                            label={<Box>{param.name}</Box>}
                            minWidth={220}
                            withArrow
                            className={classes.overflowText}
                          >
                            {param.name}
                          </OverflowTooltip>
                        </Grid.Col>
                        <Grid.Col span={7} p={0}>
                          <FormTextInput
                            name={`testValue_${index}`}
                            value={param.value || ''}
                            label={false}
                            rules={{
                              required: param.required === 1 && !param.default ? `Please enter ${param.name}` : ''
                            }}
                            leftLabel={param.type}
                            styles={() => ({
                              input: {
                                height: 22,
                                minHeight: 22,
                                lineHeight: '18px',
                                fontSize: '12px !important'
                              },
                              root: {
                                '*': {
                                  fontSize: '11px !important'
                                },
                                '.mantine-Input-icon': {
                                  paddingLeft: 8,
                                  paddingRight: 8
                                }
                              }
                            })}
                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                              const val = e.target.value
                              if (param.name === 'page' || param.name === 'page_size') {
                                const systemVal = [...systemValues]
                                systemVal[param.name === 'page' ? 0 : 1] = val
                                setSystemValues(systemVal)
                                return
                              }

                              const list = paramsList.slice()
                              list[index].value = val
                              setParamsList(list)
                            }}
                          />
                        </Grid.Col>
                      </Grid>
                    ))}

                  {editEndpoint?.batch && (
                    <Box mb={12}>
                      <Divider my={12} />
                      {batchParamsList.map((param, index) => (
                        <Grid
                          gutter="sm"
                          key={param.name}
                          sx={() => ({
                            padding: '0 16px',
                            margin: '12px 0'
                          })}
                        >
                          <Grid.Col span={5} p={0}>
                            <OverflowTooltip
                              label={<Box>{param.name}</Box>}
                              minWidth={220}
                              withArrow
                              className={classes.overflowText}
                            >
                              {param.name}
                            </OverflowTooltip>
                          </Grid.Col>
                          <Grid.Col span={7} p={0}>
                            <FormTextInput
                              name={`testValue_batch_${index}`}
                              value={param.value || ''}
                              label={false}
                              rules={{
                                required: param.required === 1 && !param.default ? `Please enter ${param.name}` : ''
                              }}
                              leftLabel={param.type}
                              styles={() => ({
                                input: {
                                  height: 22,
                                  minHeight: 22,
                                  lineHeight: '18px',
                                  fontSize: '12px !important'
                                },
                                root: {
                                  '*': {
                                    fontSize: '11px !important'
                                  },
                                  '.mantine-Input-icon': {
                                    paddingLeft: 8,
                                    paddingRight: 8
                                  }
                                }
                              })}
                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                const list = batchParamsList.slice()
                                list[index].value = e.target.value
                                setBatchParamsList(list)
                                if (!param.default) {
                                  changed()
                                }
                              }}
                            />
                          </Grid.Col>
                        </Grid>
                      ))}
                    </Box>
                  )}
                </form>
              </FormProvider>
            </Accordion.Panel>
          </Accordion.Item>
        </AccordionWrap>
      )}

      {!paramsList.length && <EmptyTips />}
    </Box>
  )
}

export default Params