import { Fragment } from 'react';
import { LinePath } from '@visx/shape';
import { Group } from '@visx/group';
import { AnyD3Scale } from '@visx/scale';
import { AnyScaleBand } from '@visx/shape/lib/types';
import { ChartData } from '../../utils/data';
import { format } from '../../utils/format';
// import { call } from '../../utils';

export type ParetoGraphProps = {
  top: number;
  left: number;
  data: ChartData[];
  xScale: AnyScaleBand;
  yScale: AnyD3Scale;
  lineColor: string;
  valueFormat?: string;
  textLabel?: boolean;
  textLabelColor?: string;
  textLabelSize: number;
  // tooltipText?: string;
  // bindTooltip?: any;
};

export const ParetoGraph = ({
  top,
  left,
  data,
  xScale,
  yScale,
  lineColor,
  textLabel = true,
  textLabelColor,
  textLabelSize,
  // tooltipText,
  // bindTooltip
  valueFormat = '{total}%',
}: ParetoGraphProps) => {
  return (
    <Group top={top} left={left}>
      <LinePath
        // data={[{ value: 0 }, ...data, { value: 100 }]}
        // x={(d, i, arr) => {
        //   if (i === 0) {
        //     return 0;
        //   } else if (i === arr.length - 1) {
        //     return width;
        //   } else {
        //     // console.log(i, xScale(i) + xScale.bandwidth() / 2);
        //     // console.log(i - 1, xScale(i - 1) + xScale.bandwidth() / 2);
        //     return xScale(i - 1) + xScale.bandwidth() / 2;
        //   }
        // }}
        data={data}
        x={(d, i) => (xScale(d.label) || 0) + xScale.bandwidth() / 2}
        y={(d) => yScale(d.value)}
        stroke={lineColor}
        strokeWidth={2}
      />
      {data.map((item, i, arr) => {
        const size = 8;
        const prev = arr[i - 1] || { value: 0 };
        const value = Math.round(item.value);
        const share = Math.round(item.value - prev.value);

        const formattedValue = valueFormat
          ? format(valueFormat, {
              prev: prev.value,
              curr: Math.round(share),
              total: value,
            })
          : String(value);

        // const tooltip = {
        //   ...item,
        //   label: tooltipText,
        //   value: '+' + share + '%',
        // };
        // const tooltipProps = call(bindTooltip, tooltip);

        return (
          <Fragment key={i}>
            <rect
              x={(xScale(item.label) || 0) + xScale.bandwidth() / 2}
              y={yScale(item.value)}
              transform={`translate(-${size / 2}, -${size / 2})`}
              width={size}
              height={size}
              fill={lineColor}
              // {...tooltipProps}
            />
            {textLabel && (
              <text
                x={(xScale(item.label) || 0) + xScale.bandwidth() / 2}
                y={yScale(item.value) - 12}
                textAnchor="middle"
                fill={textLabelColor}
                fontSize={textLabelSize}
              >
                {formattedValue}
              </text>
            )}
          </Fragment>
        );
      })}
    </Group>
  );
};