import { ActionIcon, Button, Card, Divider, Group, HoverCard, TextInput, Typography } from '@tidbcloud/uikit'
import { IconInfoCircle, IconPlus, IconTrash01 } from '@tidbcloud/uikit/icons'
import { Fragment, useEffect } from 'react'
import { useImmer } from 'use-immer'

import { DataflowColumnSelector } from 'dbaas/services/dataflow/interface'

export const ColumnSelector = ({
  defaultValue,
  onChange,
  validateError
}: {
  defaultValue: DataflowColumnSelector[]
  onChange?: (values: DataflowColumnSelector[]) => void
  validateError: boolean
}) => {
  const [selectors, updateSelectors] = useImmer<(DataflowColumnSelector & { id: number })[]>(
    defaultValue.length > 0
      ? defaultValue.map((item, idx) => {
          return {
            id: idx,
            matcher: item.matcher,
            columns: item.columns
          }
        })
      : []
  )

  useEffect(() => {
    onChange?.(
      selectors.map((i) => ({
        matcher: i.matcher?.map((i) => i.trim()),
        columns: i.columns?.map((i) => i.trim())
      }))
    )
  }, [selectors, onChange])

  const getError = (selector: DataflowColumnSelector) => {
    if (!validateError) return null
    if (!selector.columns?.length) return 'Required'
    if (selector.columns.some((i) => !i)) return 'Invalid column selector'
    return null
  }

  return (
    <Card>
      <Card.Section bg="carbon.2" p={16}>
        <Group gap={8}>
          <Typography c="carbon.7" maw={250} flex={1}>
            Tables Matching
          </Typography>
          <Typography c="carbon.7" flex={1}>
            <Group gap={8}>
              <span>Columns Selector</span>
              <HoverCard>
                <HoverCard.Target>
                  <IconInfoCircle size={14} />
                </HoverCard.Target>
                <HoverCard.Dropdown maw={300}>
                  <Typography>
                    Selecting columns from events and sending only the data changes related to those columns to the
                    downstream. Learn more details{' '}
                    <a
                      href="https://docs.pingcap.com/tidb/stable/ticdc-sink-to-kafka#column-selectors"
                      target="_blank"
                      rel="noreferrer"
                    >
                      here
                    </a>
                    .
                  </Typography>
                </HoverCard.Dropdown>
              </HoverCard>
            </Group>
          </Typography>
        </Group>
      </Card.Section>

      <Divider mx={-16} />

      {selectors.map((selector) => {
        return (
          <Fragment key={selector.id}>
            <Card.Section px={16} py={12}>
              <Group gap={8} align="flex-start" wrap="nowrap">
                <TextInput
                  placeholder="e.g. test.table1, test.table2"
                  value={selector.matcher?.join(',')}
                  size="sm"
                  sx={{ flex: 1 }}
                  maw={250}
                  error={validateError && !selector.matcher?.length && 'Required'}
                  onChange={(e) => {
                    updateSelectors((draft) => {
                      const idx = draft.findIndex((i) => i.id === selector.id)
                      if (idx !== -1) {
                        draft[idx].matcher = e.target.value.split(',')
                      }
                    })
                  }}
                />

                <Group flex={1}>
                  <TextInput
                    placeholder="Use comma to separate multiple columns"
                    size="sm"
                    value={selector.columns?.join(',')}
                    sx={{ flexGrow: 2 }}
                    error={getError(selector)}
                    onChange={(e) => {
                      updateSelectors((draft) => {
                        const idx = draft.findIndex((i) => i.id === selector.id)
                        if (idx !== -1) {
                          draft[idx].columns = e.target.value.split(',')
                        }
                      })
                    }}
                  />

                  <ActionIcon
                    variant="default"
                    onClick={() => {
                      updateSelectors((draft) => {
                        const idx = draft.findIndex((i) => i.id === selector.id)
                        if (idx !== -1) {
                          draft.splice(idx, 1)
                        }
                      })
                    }}
                  >
                    <IconTrash01 />
                  </ActionIcon>
                </Group>
              </Group>
            </Card.Section>

            <Divider mx={-16} />
          </Fragment>
        )
      })}

      <Card.Section px={16} py={12}>
        <Button
          leftSection={<IconPlus />}
          variant="default"
          size="xs"
          onClick={() => {
            updateSelectors((draft) => {
              draft.push({
                id: Date.now(),
                matcher: [],
                columns: []
              })
            })
          }}
        >
          Add new selector
        </Button>
      </Card.Section>
    </Card>
  )
}