import { PieChart, Pie, Cell, Tooltip } from 'recharts'
import { formatUsdValue, tokenPrecision } from 'utils'
import * as MonoIcons from '../icons'
import { QuestionMarkCircleIcon } from '@heroicons/react/solid'
import { useTheme } from 'next-themes'

export const CHART_COLORS = (theme) => {
  return {
    All: '#ff7c43',
    spacer: theme === 'Light' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)',
    ADA: '#404C5E',
    AVAX: '#E84142',
    BNB: '#F3BA2F',
    BTC: '#F7931A',
    ETH: '#627EEA',
    FTT: '#02A6C2',
    GMT: '#CBA74A',
    MNGO: '#FBB31F',
    MSOL: '#C8ECE1',
    RAY: '#4CA2DA',
    SOL: '#916CE0',
    SRM: '#58D4E3',
    USDC: '#2775CA',
    USDT: '#50AF95',
  }
}

const LongShortChart = ({ chartData }: { chartData: any[] }) => {
  const { theme } = useTheme()
  const CustomToolTip = () => {
    const renderIcon = (symbol) => {
      const iconName = `${symbol.slice(0, 1)}${symbol
        .slice(1, 4)
        .toLowerCase()}MonoIcon`
      const SymbolIcon = MonoIcons[iconName] || QuestionMarkCircleIcon
      return (
        <div style={{ color: CHART_COLORS(theme)[symbol] }}>
          <SymbolIcon className={`mr-1.5 h-3.5 w-auto`} />
        </div>
      )
    }

    const showTooltip = chartData.find((d) => d.symbol !== 'spacer')

    return chartData.length && showTooltip ? (
      <div className="space-y-1.5 rounded-md bg-th-bkg-2 p-3 pb-2">
        {chartData
          .filter((d) => d.symbol !== 'spacer')
          .sort((a, b) => b.value - a.value)
          .map((entry, index) => {
            const { amount, asset, symbol, value } = entry
            return (
              <div
                className="flex w-48 items-center justify-between border-b border-th-bkg-4 pb-1 text-xs last:border-b-0 last:pb-0"
                key={`item-${index}-${symbol}`}
              >
                <div className="mb-0.5 flex items-center">
                  {renderIcon(symbol)}
                  <p
                    className="mb-0 text-xs leading-none"
                    style={{ color: CHART_COLORS(theme)[symbol] }}
                  >
                    {asset}
                  </p>
                </div>
                <div className="text-right">
                  <p
                    className="mb-0 text-xs leading-none"
                    style={{ color: CHART_COLORS(theme)[symbol] }}
                  >
                    {amount.toLocaleString(undefined, {
                      maximumFractionDigits: tokenPrecision[symbol],
                    })}
                  </p>
                  <p className="mb-0 text-xxs text-th-fgd-4">
                    {formatUsdValue(value)}
                  </p>
                </div>
              </div>
            )
          })}
      </div>
    ) : null
  }

  return chartData.length ? (
    <PieChart width={40} height={40}>
      <Pie
        cursor="pointer"
        data={chartData}
        dataKey="value"
        cx="50%"
        cy="50%"
        outerRadius={20}
        innerRadius={10}
        minAngle={2}
        startAngle={90}
        endAngle={450}
      >
        {chartData
          .sort((a, b) => a.symbol.localeCompare(b.symbol))
          .map((entry, index) => (
            <Cell
              key={`cell-${index}`}
              fill={CHART_COLORS(theme)[entry.symbol]}
              stroke="rgba(0,0,0,0.1)"
            />
          ))}
      </Pie>
      <Tooltip
        content={<CustomToolTip />}
        position={{ x: 48, y: 0 }}
        wrapperStyle={{ zIndex: 10 }}
      />
    </PieChart>
  ) : null
}

export default LongShortChart