'use client';

import React, { useState } from 'react';

import { PageBody, PageHeader } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans';
import { Button } from '@kit/ui/shadcn/button';
import Modal from "@modules/common/components/modal"

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="text-sm bg-muted p-4 rounded-md">
                            {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>
    </>
  );
}