import React from 'react';
import { FaRegWindowMaximize } from 'react-icons/fa';

import { hexToRGB } from '../../utils';
import { chartData2 } from '../../utils/dummy';
import LineChart2 from '../charts/LineChart2';

import Tooltip from './Tooltip';

interface IActionProps {
  data: any;
  color: any;
  icon?: JSX.Element;
  tooltip: string;
}

const Action = ({ data, color, tooltip }: IActionProps) => {
  const chartData = data?.data
    ? {
        labels: Object.keys(data?.data),
        datasets: [
          {
            data: Object.values(data?.data),
            fill: true,
            backgroundColor: `rgba(${hexToRGB(color)}, 0.08)`,
            borderColor: color,
            borderWidth: 2,
            tension: 0,
            pointRadius: 0,
            pointHoverRadius: 3,
            pointBackgroundColor: color,
            clip: 20,
          },
        ],
      }
    : null;

  if (!data) {
    return (
      <div className="space-y-2 cursor-progress w-full h-full">
        <div className="w-full h-64 bg-slate-200 shadow-md rounded-xl animate-pulse"></div>
      </div>
    );
  }

  return (
    <div className="flex flex-col justify-between border bg-white rounded-xl p-4 w-full space-y-1 h-full max-w-full cursor-pointer">
      <div className="flex items-center space-x-2">
        <div className="text-sm text-black border border-zince-100 rounded p-2">
          <FaRegWindowMaximize />
        </div>
        <div className="w-full">
          <p className="text-xs font-bold">{data?.name}</p>
        </div>

        <Tooltip text={tooltip} />
      </div>
      <div className="font-semibold text-slate-800 text-center w-full flex justify-start items-center">
        <p className="font-bold text-xl text-center">
          {Number(data?.count || 0)?.toLocaleString()}
        </p>
      </div>

      <div className="flex flex-col items-center justify-start min-h-10">
        {data?.data ? (
          <LineChart2 data={chartData} />
        ) : (
          <LineChart2 data={chartData2} />
        )}
      </div>
    </div>
  );
};

export default Action;