import { CommonProps } from '@/@types/common'
import { Meta } from '@/@types/routes'
import { Container } from '@/components/shared'
import { DX_CLASSNAMES } from '@/constants/app.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'
import DxChart from 'devextreme-react/chart'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet'
import { useParams, useSearchParams } from 'react-router-dom'
import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
import { GridDto } from '@/proxy/form/models'

interface ChartProps extends CommonProps, Meta {
  listFormCode: string
  filter?: string
  isSubForm?: boolean
  level?: number
  refreshData?: () => Promise<void>
  gridDto?: GridDto
}

const Chart = (props: ChartProps) => {
  const { listFormCode, filter, isSubForm, level, gridDto } = props
  const { translate } = useLocalization()

  const [searchParams] = useSearchParams()
  const [chartOptions, setChartOptions] = useState<any>()
  const { createSelectDataSource } = useListFormCustomDataSource({})

  const params = useParams()
  const _listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''

  useEffect(() => {
    if (!gridDto) return

    console.log(
      gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
    )
    console.log(gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '))

    const dataSource = createSelectDataSource(
      gridDto.gridOptions,
      listFormCode,
      searchParams,
      [],
      gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
      gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '),
    )

    const options = {
      dataSource: dataSource,

      adjustOnZoom: gridDto.gridOptions.commonDto?.adjustOnZoom ?? true,
      containerBackgroundColor:
        gridDto.gridOptions.commonDto?.containerBackgroundColor ?? '#FFFFFF',
      disabled: gridDto.gridOptions.commonDto?.disabled ?? false,
      palette: gridDto.gridOptions.commonDto?.palette ?? 'Material',
      paletteExtensionMode: gridDto.gridOptions.commonDto?.paletteExtensionMode ?? 'blend',
      //theme: s(chartDto.commonDto?.theme, 'generic.light'),

      title: gridDto.gridOptions.titleDto,
      size: gridDto.gridOptions.sizeDto?.useSize ? gridDto.gridOptions.sizeDto : null,
      legend: gridDto.gridOptions.legendDto,
      margin: gridDto.gridOptions.marginDto,
      adaptiveLayout: gridDto.gridOptions.adaptivelayoutDto,
      defaultPane: gridDto.gridOptions.commonDto?.defaultPane,

      scrollBar: gridDto.gridOptions.scrollBarDto,
      zoomAndPan: gridDto.gridOptions.zoomAndPanDto,
      animation: gridDto.gridOptions.animationDto,
      export: gridDto.gridOptions.exportDto,
      crosshair: gridDto.gridOptions.crosshairDto,
      argumentAxis: gridDto.gridOptions.argumentAxisDto,
      valueAxis: gridDto.gridOptions.valueAxisDto,
      tooltip: gridDto.gridOptions.tooltipDto,

      series:
        gridDto.gridOptions.seriesDto?.length > 0
          ? gridDto.gridOptions.seriesDto.map((s) => ({
              argumentField: 'key',
              valueField: 'summary',
            }))
          : undefined,
      panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined,
      commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto,
      commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto,
      commonAxisSettings: gridDto.gridOptions.commonAxisSettingsDto,
      annotations: gridDto.gridOptions.annotationsDto,
      commonAnnotationSettings: gridDto.gridOptions.commonAnnotationSettingsDto,

      loadingIndicator: {
        enabled: true,
      },
    }

    setChartOptions(options)
  }, [gridDto, searchParams])

  return (
    <Container className={DX_CLASSNAMES}>
      {!isSubForm && gridDto && (
        <Helmet
          titleTemplate="%s | Sözsoft Kurs Platform"
          title={translate('::' + gridDto?.gridOptions?.title)}
          defaultTitle="Sözsoft Kurs Platform"
        ></Helmet>
      )}
      {_listFormCode && chartOptions && (
        <DxChart key={'DxChart' + _listFormCode} {...chartOptions}></DxChart>
      )}
    </Container>
  )
}

export default Chart