import { Box, Center, Flex, Group, LoadingOverlay, Typography } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import React, { useContext } from 'react'

import { ChartRender } from '../ChartRender'
import { ChartContext } from '../context'

export const View: React.FC<React.PropsWithChildren<{ className?: string }>> = observer(({ className }) => {
  const store = useContext(ChartContext)

  const errorMsg = () => {
    if (store.errorMsg !== '') {
      return (
        <Center h="100%" p="xl">
          <Typography variant="action-lg" c="carbon.8">
            {store.errorMsg}
          </Typography>
        </Center>
      )
    } else {
      return (
        <ChartRender
          data={store.chartData}
          formData={store.formData}
          title={store.sqlFileName || ''}
          containerSize={store.containerSize}
        />
      )
    }
  }

  return (
    <Flex
      className={className ? className : ''}
      h="100%"
      sx={(theme) => ({
        fontSize: 12,
        background: theme.colors.carbon[0],
        borderTop: `1px solid ${theme.colors.carbon[3]}`
      })}
    >
      <LoadingOverlay visible={store.loading} overlayProps={{ blur: 2 }} />
      <Box h="100%" sx={{ flex: 1 }}>
        {errorMsg()}
      </Box>
      <Box w={200} sx={(theme) => ({ overflow: 'auto', borderLeft: `1px solid ${theme.colors.carbon[3]}` })}>
        <Flex py={5} px={14} align="center" sx={(theme) => ({ borderBottom: `1px solid ${theme.colors.carbon[3]}` })}>
          <Group py={5} justify="space-between" sx={() => ({ flex: 1 })}>
            <Typography variant="action-md" c="carbon.9">
              Chart type
            </Typography>
          </Group>
          <Box w={80}>{store.renderChartTypeSelect}</Box>
        </Flex>
        <Box py={5} px={14} sx={(theme) => ({ borderBottom: `1px solid ${theme.colors.carbon[3]}` })}>
          <Group py={5} justify="space-between" sx={() => ({ flex: 1 })}>
            Data<Typography variant="action-md">{store.renderAddColumn}</Typography>
          </Group>
          <Box mt={10}>{store.renderColumns}</Box>
        </Box>
        <Box py={5} px={14}>
          <Typography variant="action-md" c="carbon.9" py={5}>
            Appearance
          </Typography>
          <Box mt={10}>{store.renderAppearance}</Box>
        </Box>
        <Box h={80} />
      </Box>
    </Flex>
  )
})