import PollBarChart from '@/components/shared/charts/bar-chart';
import PollLineChart from '@/components/shared/charts/line-chart';
import PollPieChart from '@/components/shared/charts/pie-chart';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { PollQuestionType } from '@/server/modules/poll/types/poll-question-type.enum';
import { AppRouterOutput } from '@/server/trpc/types';

type Poll = NonNullable<AppRouterOutput['poll']['get']>;

export const PollStats = ({ poll }: { poll: Poll }) => {
  const { questions } = poll;

  return (
    <div className='max-w-4xl flex-1'>
      <div className='flex flex-col gap-4 px-4'>
        <Separator className='my-4' />
        <h2 className='text-2xl font-bold'>Poll Results</h2>
        {questions.map((item, index) => (
          <Card className='space-y-2 p-6' key={index}>
            <h4 className='font-serif text-lg font-bold'>{item.title}</h4>

            {item.type === PollQuestionType.RADIO && (
              <PollPieChart item={item} />
            )}

            {item.type === PollQuestionType.CHECKBOX && (
              <PollBarChart item={item} />
            )}

            {item.type === PollQuestionType.SLIDER && (
              <PollLineChart item={item} />
            )}

            {item.type === PollQuestionType.TEXTAREA && (
              <Separator className='mt-10 mb-2 bg-neutral-400' />
            )}
          </Card>
        ))}
      </div>
    </div>
  );
};