'use client';

import React, { useState } from 'react';

import Modal from '@modules/common/components/modal';

import { PageBody, PageHeader } from '@kit/ui/page';
import { Button } from '@kit/ui/shadcn/button';
import { Trans } from '@kit/ui/trans';

import Analysis from '../_components/analysis';
import { analysisResponses } from './test-responses';

export default function AnalysisResultsPage() {
  const [openBlocks, setOpenBlocks] = useState<number[]>([]);

  return (
    <>
      <PageHeader />
      <PageBody className="gap-4">
        <div className="mt-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center sm:gap-0">
          <div>
            <h2>Analüüsi tulemused demo</h2>
          </div>
        </div>

        <div className="flex flex-col gap-2">
          {analysisResponses.map(({ id, orderedAnalysisElements }, index) => {
            const isOpen = openBlocks.includes(id);
            const closeModal = () =>
              setOpenBlocks(openBlocks.filter((block) => block !== id));
            return (
              <div key={index} className="flex flex-col gap-2 py-4">
                <div className="flex flex-col gap-2 pb-4">
                  <h3>AnalysisOrderId: {id}</h3>

                  <div className="flex flex-col gap-2">
                    <h5>OrderedAnalysisElements</h5>
                    <Button
                      onClick={() => {
                        if (isOpen) {
                          closeModal();
                        } else {
                          setOpenBlocks([...openBlocks, id]);
                        }
                      }}
                      className="w-fit"
                      color={isOpen ? 'orange' : 'grey'}
                    >
                      {isOpen ? 'Close' : 'Open'}
                    </Button>
                    {isOpen && (
                      <Modal isOpen={isOpen} close={closeModal} size="large">
                        <div className="overflow-y-auto">
                          <p>NormiStaatus</p>
                          <ul>
                            <li>
                              0 - testi väärtus jääb normaalväärtuste piirkonda
                              või on määramata,
                            </li>
                            <li>
                              1 - testi väärtus jääb hoiatava (tähelepanu
                              suunava) märkega piirkonda,
                            </li>
                            <li>
                              2 - testi väärtus on normaalväärtuste piirkonnast
                              väljas või kõrgendatud tähelepanu nõudvas
                              piirkonnas.
                            </li>
                          </ul>

                          <p>UuringOlek</p>
                          <ul>
                            <li>1 - Järjekorras,</li>
                            <li>2 - Ootel,</li>
                            <li>3 - Töös,</li>
                            <li>4 - Lõpetatud,</li>
                            <li>5 - Tagasi lükatud,</li>
                            <li>6 - Tühistatud,</li>
                          </ul>

                          <pre className="bg-muted rounded-md p-4 text-sm">
                            {JSON.stringify(orderedAnalysisElements, null, 2)}
                          </pre>
                        </div>
                      </Modal>
                    )}
                  </div>

                  {orderedAnalysisElements ? (
                    orderedAnalysisElements.map((element, index) => (
                      <Analysis key={index} element={element} />
                    ))
                  ) : (
                    <div className="text-muted-foreground text-sm">
                      <Trans i18nKey="analysis-results:noAnalysisElements" />
                    </div>
                  )}
                </div>
                <hr />
              </div>
            );
          })}
        </div>
      </PageBody>
    </>
  );
}
