import { Column } from '@ant-design/plots'
import { Card, Col, message, Row, Spin, Statistic } from 'antd'
import React, { useEffect, useState } from 'react'

import { getReleaseInfo } from '../../../apiClient/services/devops'
import { DashboardReleaseInfoResp } from '../../../apiClient/services/devops/interface'
import { TimeRange } from '../TimeRange'

export const ChangeManagementInfo: React.FC<
  React.PropsWithChildren<{ timeRange: TimeRange }>
> = ({ timeRange }) => {
  return (
    <>
      <Row gutter={[16, 16]}>
        <ReleaseInfo timeRange={timeRange} />
      </Row>
    </>
  )
}

export const ReleaseInfo: React.FC<
  React.PropsWithChildren<{ timeRange: TimeRange }>
> = ({ timeRange }) => {
  const [releaseInfo, setReleaseInfo] = useState<DashboardReleaseInfoResp>({})
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    async function fetchInfo() {
      try {
        setLoading(true)
        await getReleaseInfo({
          startTs: timeRange.startTs,
          endTs: timeRange.endTs
        })
          .then((resp) => {
            setReleaseInfo(resp.data)
          })
          .catch((err) => {
            message.error({
              content: err.response?.data?.errmsg || 'Internal server error',
              key: 'overview'
            })
          })
      } finally {
        setLoading(false)
      }
    }

    fetchInfo()
  }, [timeRange])
  const sprintMonthlyTrendConfig = {
    data: releaseInfo.sprintApplicationMonthlyTrends || [],
    xField: 'month',
    yField: 'value',
    seriesField: 'series',
    isStack: true,
    height: 300,
    label: {
      style: {
        fill: '#fff'
      }
    }
  }
  const hotfixMonthlyTrendConfig = {
    data: releaseInfo.hotfixApplicationMonthlyTrends || [],
    xField: 'month',
    yField: 'value',
    seriesField: 'series',
    isStack: true,
    height: 300,
    label: {
      style: {
        fill: '#fff'
      }
    }
  }
  return (
    <>
      <Col span={6}>
        <Card title="Release Summary">
          {loading ? (
            <Spin></Spin>
          ) : (
            <>
              <Row gutter={[16, 16]}>
                <Col span={12}>
                  <Statistic
                    title={'Sprint'}
                    value={releaseInfo.sprintTotal}
                    valueStyle={{
                      color: '#3f8600',
                      fontSize: '38px',
                      fontWeight: 600
                    }}
                  />
                </Col>
                <Col span={12}>
                  <Statistic
                    title={'Hotfix'}
                    value={releaseInfo.hotfixTotal}
                    valueStyle={{
                      color: '#3f8600',
                      fontSize: '38px',
                      fontWeight: 600
                    }}
                  />
                </Col>
              </Row>
            </>
          )}
        </Card>
      </Col>
      <Col span={9}>
        <Card title="Sprint Trends By Application">
          {loading ? <Spin></Spin> : <Column {...sprintMonthlyTrendConfig} />}
        </Card>
      </Col>
      <Col span={9}>
        <Card title="Hotfix Trends By Application">
          {loading ? <Spin></Spin> : <Column {...hotfixMonthlyTrendConfig} />}
        </Card>
      </Col>
    </>
  )
}