import { ReactElement, useRef, useState } from 'react';
import { Box, Button, Stack, Typography, useTheme } from '@mui/material';
import EChartsReactCore from 'echarts-for-react/lib/core';

import { LineSeriesOption } from 'echarts';
import RevenueChart from '../Sales/Revenue/RevenueChart';

const PropertyValueGraphCard = (): ReactElement => {
  const theme = useTheme();
  const chartRef = useRef<EChartsReactCore | null>(null);

  const lineChartColors = [theme.palette.secondary.main, theme.palette.primary.main];

  const legendData = [
    { name: 'Loan Value', icon: 'circle' },
    { name: 'Home Value', icon: 'circle' },
  ];

  const seriesData: LineSeriesOption[] = [
      {
        id: 1,
        data: [450000,
449200,
448400,
447600,
446800,
446000,
445200,
444400,
443600,
442800,
442000,
441200,
440400,
439600,
438800,
438000,
437200,
436400,
435600,
434800,
434000,
433200,
432400,
431600,
430800,
430000],
        type: 'line',
        smooth: true,
        color: lineChartColors[0],
        name: 'Loan Value',
        legendHoverLink: true,
        showSymbol: true,
        symbolSize: 12,
        lineStyle: {
          width: 5,
        },
      },
      {
        id: 2,
        data: [450000,
452000,
453000,
452000,
452000,
451000,
450000,
452000,
452000,
454000,
453000,
452000,
452000,
452000,
451000,
451000,
451000,
451000,
450000,
451000,
452000,
453000,
454000,
453000,
455000,
454000],
        type: 'line',
        smooth: true,
        color: lineChartColors[1],
        name: 'Home Value',
        legendHoverLink: true,
        showSymbol: false,
        symbolSize: 12,
        lineStyle: {
          width: 5,
        },
      },
    ];
  const [revenueAdType, setRevenueAdType] = useState<any>({
      'Loan Value': false,
      'Home Value': false,
    });

  const toggleClicked = (name: string) => {
    setRevenueAdType((prevState: any) => ({
      ...prevState,
      [name]: !prevState[name],
    }));
  };

  const onChartLegendSelectChanged = (name: string) => {
    if (chartRef.current) {
      const instance = chartRef.current.getEchartsInstance();
      instance.dispatchAction({
        type: 'legendToggleSelect',
        name: name,
      });
    }
  };

  return(
    <Stack
      bgcolor="common.white"
      borderRadius={5}
      minHeight={460}
      height={1}
      mx="auto"
      boxShadow={theme.shadows[4]}
    >
      <Stack
        direction={{ sm: 'row' }}
        justifyContent={{ sm: 'space-between' }}
        alignItems={{ sm: 'center' }}
        gap={2}
        padding={3.75}
      >
        <Typography variant="h5" color="text.primary">
          Home and Loan Value
        </Typography>
        <Stack direction="row" gap={2}>
          {Array.isArray(seriesData) &&
            seriesData.map((dataItem, index) => (
              <Button
                key={dataItem.id}
                variant="text"
                onClick={() => {
                  //toggleClicked(dataItem.name as string);
                  onChartLegendSelectChanged(dataItem.name as string);
                }}
                sx={{
                  justifyContent: 'flex-start',
                  p: 0,
                  borderRadius: 1,
                  opacity: revenueAdType[`${dataItem.name}`] ? 0.5 : 1,
                }}
                disableRipple
              >
                {' '}
                <Stack direction="row" alignItems="center" gap={1} width={1}>
                  <Box
                    sx={{
                      width: 13,
                      height: 13,
                      bgcolor: revenueAdType[`${dataItem.name}`]
                        ? 'action.disabled'
                        : lineChartColors[index],
                      borderRadius: 400,
                    }}
                  ></Box>
                  <Typography variant="body2" color="text.secondary" flex={1} textAlign={'left'}>
                    {dataItem.name}
                  </Typography>
                </Stack>
              </Button>
            ))}
        </Stack>
      </Stack>
      <Box flex={1}>
        <RevenueChart
          chartRef={chartRef}
          sx={{ minHeight: 1 }}
          seriesData={seriesData}
          legendData={legendData}
          colors={lineChartColors}
        />
      </Box>
    </Stack>
  )
}

export default PropertyValueGraphCard;