import { Icon } from '@iconify/react';
import React from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';

interface UniformityGaugeChartSkeletonProps {
  label?: string;
  kandang?: string;
  week?: string;
  currentValue?: number;
  totalValue?: number;
}

const UniformityGaugeChartSkeleton: React.FC<
  UniformityGaugeChartSkeletonProps
> = ({}) => {
  const numberOfSegments = 50;
  const value = 0;
  const filledSegments = Math.round((value / 100) * numberOfSegments);

  const data = Array.from({ length: numberOfSegments }, (_, index) => ({
    name: index,
    value: 1,
    filled: index < filledSegments,
  }));

  const activeColor = '#1890ff';
  const inactiveColor = '#f0f0f0';

  return (
    <div className='flex flex-col w-full items-center'>
      <div className='h-64 w-full relative flex justify-center min-h-64'>
        <div className='relative w-full h-full flex flex-col items-center justify-end min-w-0'>
          <ResponsiveContainer width='100%' height={256}>
            <PieChart>
              <Pie
                data={data}
                cx='50%'
                cy='70%'
                startAngle={180}
                endAngle={0}
                innerRadius='75%'
                outerRadius='100%'
                paddingAngle={2}
                dataKey='value'
                stroke='none'
                isAnimationActive={false}
              >
                {data.map((entry, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={entry.filled ? activeColor : inactiveColor}
                  />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center mt-4'>
            {/* Filter icon */}
            <div className='mb-2 mt-5'>
              <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
                <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                  <Icon
                    icon='heroicons:funnel'
                    className='text-white'
                    width={20}
                    height={20}
                  />
                </div>
              </div>
            </div>

            {/* Empty state text */}
            <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
              No Filters Selected
            </h3>
            <p className='text-base-content/50 text-xs text-center max-w-xs'>
              Please choose filters to narrow down your results and make your
              search easier.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UniformityGaugeChartSkeleton;
