'use client';

import { useEffect, useState, useRef } from 'react';
import { useMediaQuery } from 'react-responsive';
import Image from 'next/image';

import { updateAmpelkarteGWWP } from '@/redux/ampelkarteGWWPSlice';
import { updateResourcesGWWP } from '@/redux/resourcesGWWPSlice';
import { updateScreenshot } from '@/redux/screenshotSlice';
import { useAppSelector, useAppDispatch } from '@/redux/hooks';

import Collapsible from '@/app/components/collapsible';
import Footer from '@/app/components/footer';
import Warning from '@/app/components/warning';

import { TableAmpelkarteGWWP } from './table-ampelkarte-gwwp';

const textTemplates = {
  0: [
    `Die flächenspezifische Jahresenergie für eine thermische Grundwassernutzung mit ausgeglichener Jahresbilanz, wobei die im Winter zur Heizung entzogene Wärme  im Sommer vollständig wieder zurückgegeben wird, 
  abhängig von der bestehenden Grundwassertemperatur und einer minimalen Rückgabetemperatur von 5 °C und einer maximalen Rückgabetemperatur von 18 °C beträgt rund `,
    ' kWh/m²/a',
  ],
  1: [
    `Die flächenspezifische Jahresenergie für eine thermische Grundwassernutzung im Heiz- und Kühlbetrieb bei Normbetriebsstunden, 
  abhängig von der bestehenden Grundwassertemperatur und einer minimalen Rückgabetemperatur von 5 °C und einer maximalen Rückgabetemperatur von 18 °C beträgt rund `,
    ' kWh/m²/a',
  ],
  2: ['Der Grundwasserspiegel ist am Grundstück in einer Tiefe von rund ', ' m zu erwarten.'],
  3: ['Das Grundwasser ist am Grundstück rund ', ' m mächtig.'],
  4: ['Die hydraulische Leitfähigkeit (kf-Wert) beträgt am Grundstück rund ', ' m/s.'],
  5: ['Die maximale Jahrestemperatur des Grundwassers (für das Jahr 2020) liegt bei ', ' °C.'],
  6: ['Die mittlere Jahrestemperatur des Grundwassers (für das Jahr 2020) liegt bei ', ' °C.'],
  7: ['Die minimale Jahrestemperatur des Grundwassers (für das Jahr 2020) liegt bei ', ' °C.'],
  8: [
    'Die maximale Pumpleistung eines Brunnenpaars mit 50 m Abstand zwischen Entnahme- und Rückgabebrunnen beträgt rund ',
    ' l/s.',
  ],
  9: [
    'Die maximale Volllast-Leistung eines Brunnenpaars mit 50 m Abstand zwischen Entnahme- und Rückgabebrunnen beträgt rund ',
    ' kW.',
  ],
};

export default function Panel({ address }: { address: string[] }) {
  const dispatch = useAppDispatch();
  const isMobile = useMediaQuery({ maxWidth: 640 });

  const [opened, setOpened] = useState<boolean>(true);

  const innerRef = useRef<HTMLDivElement | null>(null);

  const ampelkarte = useAppSelector((store) => store.ampelkarteGWWP.value);
  const resources = useAppSelector((store) => store.resourcesGWWP.value);
  const screenshot = useAppSelector((store) => store.screenshot.value);

  // initialize query handlers
  useEffect(() => {
    dispatch(updateAmpelkarteGWWP([]));
    dispatch(updateResourcesGWWP([]));
    dispatch(updateScreenshot(''));

    return () => {
      dispatch(updateAmpelkarteGWWP([]));
      dispatch(updateResourcesGWWP([]));
      dispatch(updateScreenshot(''));
    };
  }, [dispatch, isMobile]);

  // format values
  const formatGWWP = (layerId: number, layerName: string, value: string) => {
    if (value !== 'NoData') {
      if ([5, 6, 7].includes(layerId)) {
        value = parseFloat(value).toFixed(1);
      } else if (layerId === 4) {
        value = parseFloat(value).toFixed(4);
      } else {
        value = parseFloat(value).toFixed(0);
      }
    }

    if (value === 'NoData') {
      return layerName + ': keine Daten';
    } else {
      return (textTemplates as any)[layerId][0] + value + (textTemplates as any)[layerId][1];
    }
  };

  const handleClick = () => {
    setOpened(!opened);
    if (innerRef && innerRef.current) {
      innerRef.current.classList.toggle('hidden');
    }
  };

  const tableDataCSS = 'w-full break-words border-b border-solid border-gray-300';

  return (
    <div
      className={`absolute top-4 right-4 ${opened && isMobile ? 'bottom-4' : ''} ${
        opened && resources && resources.length > 0 ? 'bottom-4' : ''
      } w-full md:w-1/3 xl:w-1/4 pl-8 md:pl-0`}
    >
      <div
        onClick={handleClick}
        className="bg-gray-700 text-white cursor-pointer p-4 w-full border-0 hover:bg-gray-500 h-12 items-center justify-between text-sm xl:text-base"
      >
        Abfrageergebnis <span className="float-right">{opened ? '-' : '+'}</span>
      </div>
      <div
        className={`max-h-[calc(100%-3rem)] px-2 xl:px-4 py-4 overflow-y-auto bg-white text-sm ${
          opened ? '' : 'hidden'
        }`}
        ref={innerRef}
      >
        {screenshot ? <Image src={screenshot} alt="Screenshot" width={1000} height={500}></Image> : null}
        {address && address.length > 0 ? (
          <table id="address-table" className="table-fixed w-full mt-3 mr-0 mb-3 ml-0">
            <tbody>
              <tr>
                <td>
                  {address[0]}
                  <br></br>
                  {address[1]} {address[3]}
                </td>
              </tr>
            </tbody>
          </table>
        ) : (
          <div className="pb-2">
            <Warning>Mit einem Klick in die Karte können Sie geothermische Daten abfragen.</Warning>
          </div>
        )}
        {resources && resources.length > 0 ? (
          <Collapsible title="Ressourcen" open={true}>
            <table id="resources-table" className="table-fixed w-full mb-4">
              <thead>
                <tr>
                  <td></td>
                </tr>
              </thead>
              <tbody>
                <tr className="w-full">
                  <th className="pt-4 pb-2 text-center">Ressourcen für vordefinierte Grundwassernutzung</th>
                </tr>
                {resources.slice(0, 2).map((result: any) => {
                  return (
                    <tr className="w-full" key={result.layerId}>
                      <td className={tableDataCSS}>
                        {formatGWWP(
                          result.layerId,
                          result.layerName,
                          result.feature.attributes['Classify.Pixel Value']
                        )}
                      </td>
                    </tr>
                  );
                })}
                <tr className="w-full">
                  <th className="pt-4 pb-2 text-center">Standortabhängige Parameter</th>
                </tr>
                {resources.slice(2, 10).map((result: any) => {
                  return (
                    <tr className="w-full" key={result.layerId}>
                      <td className={tableDataCSS}>
                        {formatGWWP(
                          result.layerId,
                          result.layerName,
                          result.feature.attributes['Classify.Pixel Value']
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Collapsible>
        ) : null}
        {ampelkarte && ampelkarte.length > 0 ? <TableAmpelkarteGWWP results={ampelkarte}></TableAmpelkarteGWWP> : null}
        <Footer></Footer>
      </div>
    </div>
  );
}