import React, { useRef, useState } from 'react'
import { Row, Col, Card, Select, Carousel, Empty } from 'antd'
import styles from './index.less'
import { Doughnut } from 'react-chartjs-2'
import { Chart, ArcElement } from 'chart.js'
import type { ToFollowProps } from '../../Types/Dashboard'
import { useNavigate } from 'react-router-dom'

Chart.register(ArcElement)

const ToDOClients22 = ({
    clientthingstofollowInProgressList,
    clientthingstofollowOverDueList,
    taskthingstofollowInProgressList,
    taskthingstofollowOverDueList,
}: ToFollowProps): React.ReactElement => {
    const [dropdownItem, setDropDownItem] = useState('all')
    const navigate = useNavigate()
    const onChangeDropDown = (data: any): void => {
        setDropDownItem(data)
    }

    interface GraphDataType {
        label: string
        value: number
        percentage: number
        color: string
    }

    const findColor = (label: string): string => {
        switch (label) {
            case 'VAT':
                return '#695EEF'
            case 'CT':
                return '#50effb'
            case 'PAYE':
                return '#3fe4a8'
            case 'Pension':
                return '#FFAC30'
            case 'AA':
                return '#f27e2d'
            case 'CS':
                return '#e4afd9'
            case 'Ad hoc':
                return '#50cd44'
            case 'My Task':
                return '#A020F0'
            default:
                return '#695EEF'
        }
    }

    const getTotal = (list: string[][]): number => {
        return list.length > 0
            ? list?.reduce(function (acc, obj) {
                  return acc + Number(obj[1])
              }, 0)
            : 0
    }

    const getGraphData = (
        list: string[][],
        total: number
    ): GraphDataType[] | null => {
        return list.length > 0 && total > 0
            ? list?.map((data: string[]) => {
                  return {
                      label: data[0],
                      value: Number(data[1]),
                      percentage: (Number(data[1]) / total) * 100,
                      color: findColor(data[0]),
                  }
              })
            : null
    }

    const totalClientInProgress: number = getTotal(
        clientthingstofollowInProgressList
    )

    const totalClientOverDue: number = getTotal(clientthingstofollowOverDueList)

    const totalTaskInProgress: number = getTotal(
        taskthingstofollowInProgressList
    )

    const totalTaskOverDue: number = getTotal(taskthingstofollowOverDueList)

    const graphClientInProgressData: GraphDataType[] | null = getGraphData(
        clientthingstofollowInProgressList,
        totalClientInProgress
    )

    const dataClientInProgressValues = {
        graphData: graphClientInProgressData,
        total: totalClientInProgress,
    }

    const dataClientInProgress =
        graphClientInProgressData != null
            ? {
                  labels: dataClientInProgressValues?.graphData?.map(
                      (data) => data.label
                  ),
                  datasets: [
                      {
                          data: dataClientInProgressValues?.graphData?.map(
                              (data) => data.value
                          ),
                          backgroundColor:
                              dataClientInProgressValues?.graphData?.map(
                                  (data) => data.color
                              ),
                          display: true,
                          borderColor: '#FFFFFF',
                      },
                  ],
              }
            : null

    const graphClientOverDueData: GraphDataType[] | null = getGraphData(
        clientthingstofollowOverDueList,
        totalClientOverDue
    )

    const dataClientOverDueValues = {
        graphData: graphClientOverDueData,
        total: totalClientOverDue,
    }
    const dataClientOverDue =
        graphClientOverDueData !== null
            ? {
                  labels: dataClientOverDueValues?.graphData?.map(
                      (data) => data.label
                  ),
                  datasets: [
                      {
                          data: dataClientOverDueValues?.graphData?.map(
                              (data) => data.value
                          ),
                          backgroundColor:
                              dataClientOverDueValues?.graphData?.map(
                                  (data) => data.color
                              ),
                          display: true,
                          borderColor: '#FFFFFF',
                      },
                  ],
              }
            : null

    const graphTaskInProgressData: GraphDataType[] | null = getGraphData(
        taskthingstofollowInProgressList,
        totalTaskInProgress
    )

    const dataTaskInProgressValues = {
        graphData: graphTaskInProgressData,
        total: totalTaskInProgress,
    }
    const dataTaskInProgress =
        graphTaskInProgressData !== null
            ? {
                  labels: dataTaskInProgressValues?.graphData?.map(
                      (data) => data.label
                  ),
                  datasets: [
                      {
                          data: dataTaskInProgressValues?.graphData?.map(
                              (data) => data.value
                          ),
                          backgroundColor:
                              dataTaskInProgressValues?.graphData?.map(
                                  (data) => data.color
                              ),
                          display: true,
                          borderColor: '#FFFFFF',
                      },
                  ],
              }
            : null

    const graphTaskOverDueData: GraphDataType[] | null = getGraphData(
        taskthingstofollowOverDueList,
        totalTaskOverDue
    )

    const dataTaskOverDueValues = {
        graphData: graphTaskOverDueData,
        total: totalTaskOverDue,
    }
    const dataTaskOverDue =
        graphTaskOverDueData !== null
            ? {
                  labels: dataTaskOverDueValues?.graphData?.map(
                      (data) => data.label
                  ),
                  datasets: [
                      {
                          data: dataTaskOverDueValues?.graphData?.map(
                              (data) => data.value
                          ),
                          backgroundColor:
                              dataTaskOverDueValues?.graphData?.map(
                                  (data) => data.color
                              ),
                          display: true,
                          borderColor: '#FFFFFF',
                      },
                  ],
              }
            : null

    const carouselRef = useRef<any>(null)

    const [selectHeader, setSelectHeader] = useState<number>(0)
    const onChange = (currentSlide: number): void => {
        setSelectHeader(currentSlide)
    }

    const Chart = ({
        data,
        total,
    }: {
        data: any
        total: number
    }): React.ReactElement => {
        return data != null ? (
            <>
                <div className={styles.toFollow__chart__main}>
                    <Doughnut
                        data={data}
                        width={'100%'}
                        height={'auto'}
                        options={{
                            plugins: {
                                legend: {
                                    display: false,
                                },
                                tooltip: {
                                    enabled: true,
                                    usePointStyle: true,
                                },
                            },
                            rotation: 0,
                            circumference: 360,
                            cutout: '60%',
                            maintainAspectRatio: false,
                            responsive: true,
                        }}
                    />
                    <div className={styles.toFollow__chart__text}>
                        Total {total}
                    </div>
                </div>
            </>
        ) : (
            <div className={styles.toFollow__chart__main}>
                <Empty
                    style={{ padding: '40px 0px' }}
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                />
            </div>
        )
    }

    const goTo = (slide: number): void => {
        setSelectHeader(slide)
        carouselRef?.current?.goTo(slide, false)
    }
    return (
        <Card className={`${styles.card} ${styles.toFollow__main__height}`}>
            <div className={styles.cardContent}>
                <Row className={styles.marginTop10}>
                    <Col span={12} className={styles.displayflex}>
                        <Select
                            defaultValue={dropdownItem}
                            variant={undefined}
                            className={styles.toFollow__select}
                            onChange={onChangeDropDown}
                            options={[
                                { value: 'all', label: 'All' },
                                { value: '10', label: 'Last 10 days' },
                                { value: '20', label: 'Last 20 days' },
                                { value: '30', label: 'Last 30 days' },
                            ]}
                        />
                    </Col>
                    <Col span={12}>
                        <div
                            className={styles.toFollow__viewAll}
                            onClick={() => {
                                const mode = 2
                                navigate(`/to-follow`, {
                                    state: { mode },
                                })
                            }}
                        >
                            View All
                        </div>
                    </Col>
                </Row>

                <Row className={styles.marginTop10}>
                    <Col
                        span={6}
                        onClick={() => {
                            goTo(0)
                        }}
                        style={{ cursor: 'pointer' }}
                    >
                        <div
                            className={
                                selectHeader === 0
                                    ? styles.toFollow__tab__active
                                    : styles.toFollow__tab__inactive
                            }
                        >
                            Task in progress
                        </div>
                    </Col>
                    <Col
                        span={6}
                        onClick={() => {
                            goTo(1)
                        }}
                        style={{ cursor: 'pointer' }}
                    >
                        <div
                            className={
                                selectHeader === 1
                                    ? styles.toFollow__tab__active
                                    : styles.toFollow__tab__inactive
                            }
                        >
                            Task overdue
                        </div>
                    </Col>
                    <Col
                        span={6}
                        onClick={() => {
                            goTo(2)
                        }}
                        style={{ cursor: 'pointer' }}
                    >
                        <div
                            className={
                                selectHeader === 2
                                    ? styles.toFollow__tab__active
                                    : styles.toFollow__tab__inactive
                            }
                        >
                            Client in progress
                        </div>
                    </Col>
                    <Col
                        span={6}
                        onClick={() => {
                            goTo(3)
                        }}
                        style={{ cursor: 'pointer' }}
                    >
                        <div
                            className={
                                selectHeader === 3
                                    ? styles.toFollow__tab__active
                                    : styles.toFollow__tab__inactive
                            }
                        >
                            Client overdue
                        </div>
                    </Col>
                </Row>

                <Carousel dots={false} afterChange={onChange} ref={carouselRef}>
                    <div>
                        <Chart
                            data={dataClientInProgress ?? null}
                            total={totalClientInProgress}
                        />
                    </div>
                    <div>
                        <Chart
                            data={dataClientOverDue ?? null}
                            total={totalClientOverDue}
                        />
                    </div>
                    <div>
                        <Chart
                            data={dataTaskInProgress ?? null}
                            total={totalTaskInProgress}
                        />
                    </div>
                    <div>
                        <Chart
                            data={dataTaskOverDue ?? null}
                            total={totalTaskOverDue}
                        />
                    </div>
                </Carousel>
            </div>
        </Card>
    )
}

export default ToDOClients22