import { Chart, Partition, Settings } from '@elastic/charts'
import { useChartColors, useChartThemeConfig } from '@tidb-cloud-uikit/theme/Chart'
import { Box, Typography } from '@tidbcloud/uikit'
import { keyBy } from 'lodash-es'
import { observer } from 'mobx-react'
import React, { useMemo } from 'react'

import { PieFormData } from '../FormConfig/PieFormData'
import { AggregationEnum, AppearanceEnum, ChartData, ColumnLevelEnum } from '../type'
import { getColumnAccessor, processChartData } from '../util'

export const PieChart: React.FC<
  React.PropsWithChildren<{ data: ChartData | null; formData: PieFormData; title: string }>
> = observer(({ data, formData, title }) => {
  const { chartColorsOpacity08 } = useChartColors()

  const { themeConfig } = useChartThemeConfig()
  const labelField = formData.columnData[ColumnLevelEnum.First]?.value[0]?.field || ''
  const value = formData.columnData[ColumnLevelEnum.Second]?.value[0]
  const arcField = getColumnAccessor(value?.aggregation || AggregationEnum.None, value?.field || '')

  const seriesData = useMemo(() => {
    return processChartData(data, labelField, formData.columnData[ColumnLevelEnum.Second]?.value || [])
  }, [data, labelField, arcField])

  const appearanceRecord = useMemo(() => {
    return keyBy(formData.appearance, 'key')
  }, [formData.appearance])

  const showLegend = !!appearanceRecord[AppearanceEnum.ShowLegend].value

  return data ? (
    <Box h="100%" pb={32}>
      <Box
        pt="xs"
        pl="md"
        sx={(theme) => ({
          color: theme.colors.carbon[8]
        })}
      >
        <Typography variant="body-lg">{title}</Typography>
      </Box>
      <Chart>
        <Settings
          showLegend={showLegend}
          theme={{
            ...themeConfig,
            partition: { maxFontSize: 14 },
            chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }
          }}
        />
        <Partition
          id="spec_1"
          data={seriesData}
          valueAccessor={(d) => +d[arcField]}
          layers={[
            {
              groupByRollup: (d: any) => d[labelField],
              shape: {
                fillColor: (_key, sortIndex) => {
                  return chartColorsOpacity08[sortIndex % chartColorsOpacity08.length]
                }
              }
            }
          ]}
        />
      </Chart>
    </Box>
  ) : null
})