import React from 'react';
import {
  Accordion,
  AccordionSection,
  AccordionSectionContent,
  AccordionSectionSummary,
  AccordionSectionSummaryHeading,
} from '@digigov/ui/content/Accordion';
import {
  SummaryList,
  SummaryListItem,
  SummaryListItemKey,
  SummaryListItemValue,
  SummaryListItemAction,
} from '@digigov/ui/content/SummaryList';
import { Hidden } from '@digigov/ui/layouts/Hidden';
import { Link } from '@digigov/ui/navigation/Link';
import {
  Tabs,
  TabsHeading,
  TabsList,
  useTabs,
} from '@digigov/ui/navigation/Tabs';
import { TabsListItem, TabsPanel } from '@digigov/ui/navigation/Tabs/auto';
import { Heading } from '@digigov/ui/typography/Heading';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export function UsingAccordion(_: any) {
  const { register, panel } = useTabs({ defaultOpen: 'a' });

  const UserContent = () => {
    return (
      <>
        <Heading size="md" element="h3">
          Στοιχεία πολίτη
        </Heading>
        <SummaryList>
          <SummaryListItem>
            <SummaryListItemKey>Όνομα</SummaryListItemKey>
            <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
            <SummaryListItemAction>
              <Link href="#">
                Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
              </Link>
            </SummaryListItemAction>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ημ. Γέννησης</SummaryListItemKey>
            <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
            <SummaryListItemValue>6941234567</SummaryListItemValue>
            <SummaryListItemAction>
              <Link>
                Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
              </Link>
            </SummaryListItemAction>
          </SummaryListItem>
        </SummaryList>
      </>
    );
  };
  const CaseContent = () => {
    return (
      <>
        <Heading size="md" element="h3">
          Yποθέσεις
        </Heading>
        Περιεχόμενα υποθέσεων
      </>
    );
  };

  const MessageContent = () => {
    return (
      <>
        <Heading size="md" element="h3">
          Μηνύματα
        </Heading>
        <SummaryList>
          <SummaryListItem>
            <SummaryListItemKey>Ημερομηνία Ειδοποίησης</SummaryListItemKey>
            <SummaryListItemValue>25/03/2025</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Αποστολέας</SummaryListItemKey>
            <SummaryListItemValue>Δημοτική Αρχή Αθηνών</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Θέμα</SummaryListItemKey>
            <SummaryListItemValue>
              Ειδοποίηση για πληρωμή Δημοτικών Τελών
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Μήνυμα</SummaryListItemKey>
            <SummaryListItemValue>
              Παρακαλούμε να εξοφλήσετε τα δημοτικά τέλη για το έτος 2025 μέχρι
              τις 15/04/2025.
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ημερομηνία Ειδοποίησης</SummaryListItemKey>
            <SummaryListItemValue>15/03/2025</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Αποστολέας</SummaryListItemKey>
            <SummaryListItemValue>Υπουργείο Οικονομικών</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Θέμα</SummaryListItemKey>
            <SummaryListItemValue>
              Ειδοποίηση για Φορολογική Δήλωση
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Μήνυμα</SummaryListItemKey>
            <SummaryListItemValue>
              Η προθεσμία υποβολής της φορολογικής δήλωσης λήγει στις
              31/03/2025. Παρακαλούμε υποβάλετε τη δήλωσή σας εγκαίρως.
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ημερομηνία Ειδοποίησης</SummaryListItemKey>
            <SummaryListItemValue>10/03/2025</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Αποστολέας</SummaryListItemKey>
            <SummaryListItemValue>Εθνική Τράπεζα Ελλάδος</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Θέμα</SummaryListItemKey>
            <SummaryListItemValue>Αναγγελία Συναλλαγής</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Μήνυμα</SummaryListItemKey>
            <SummaryListItemValue>
              Η συναλλαγή σας για το ποσό των 500€ ολοκληρώθηκε με επιτυχία στις
              10/03/2025.
            </SummaryListItemValue>
          </SummaryListItem>
        </SummaryList>
      </>
    );
  };

  const HistoryContent = () => {
    return (
      <>
        <Heading size="md" element="h3">
          Ιστορικό
        </Heading>
        <SummaryList>
          <SummaryListItem>
            <SummaryListItemKey>Ημερομηνία</SummaryListItemKey>
            <SummaryListItemValue>25/03/2025</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ενέργεια</SummaryListItemKey>
            <SummaryListItemValue>
              Έκδοση Υπεύθυνης Δήλωσης
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Λεπτομέρειες</SummaryListItemKey>
            <SummaryListItemValue>
              Δήλωση απώλειας εγγράφου
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ημερομηνία</SummaryListItemKey>
            <SummaryListItemValue>15/03/2025</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ενέργεια</SummaryListItemKey>
            <SummaryListItemValue>
              Υποβολή Φορολογικής Δήλωσης
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Λεπτομέρειες</SummaryListItemKey>
            <SummaryListItemValue>Ε1 - Έτος 2024</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ημερομηνία</SummaryListItemKey>
            <SummaryListItemValue>10/03/2025</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ενέργεια</SummaryListItemKey>
            <SummaryListItemValue>
              Έκδοση Πιστοποιητικού Οικογενειακής Κατάστασης
            </SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Λεπτομέρειες</SummaryListItemKey>
            <SummaryListItemValue>Δήμος Αθηναίων</SummaryListItemValue>
          </SummaryListItem>
        </SummaryList>
      </>
    );
  };

  return (
    <>
      <Hidden xs sm>
        <Tabs>
          <TabsHeading size="md">Περιεχόμενα</TabsHeading>
          <TabsList>
            <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
            <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
            <TabsListItem {...register('c')}>Μηνύματα</TabsListItem>
            <TabsListItem {...register('d')}>Ιστορικό</TabsListItem>
          </TabsList>
          <TabsPanel {...panel('a')}>
            <UserContent />
          </TabsPanel>
          <TabsPanel {...panel('b')}>
            <CaseContent />
          </TabsPanel>
          <TabsPanel {...panel('c')}>
            <MessageContent />
          </TabsPanel>
          <TabsPanel {...panel('d')}>
            <HistoryContent />
          </TabsPanel>
        </Tabs>
      </Hidden>
      <Hidden mdUp>
        <Accordion summaryColor="secondary" dense>
          <AccordionSection open>
            <AccordionSectionSummary>
              <AccordionSectionSummaryHeading aria-controls="content1">
                Στοιχεία πολίτη
              </AccordionSectionSummaryHeading>
            </AccordionSectionSummary>
            <AccordionSectionContent id="content1">
              <UserContent />
            </AccordionSectionContent>
          </AccordionSection>
          <AccordionSection>
            <AccordionSectionSummary>
              <AccordionSectionSummaryHeading aria-controls="content2">
                Yποθέσεις
              </AccordionSectionSummaryHeading>
            </AccordionSectionSummary>
            <AccordionSectionContent id="content2">
              <CaseContent />
            </AccordionSectionContent>
          </AccordionSection>
          <AccordionSection>
            <AccordionSectionSummary>
              <AccordionSectionSummaryHeading aria-controls="content3">
                Μηνύματα
              </AccordionSectionSummaryHeading>
            </AccordionSectionSummary>
            <AccordionSectionContent id="content3">
              <MessageContent />
            </AccordionSectionContent>
          </AccordionSection>
          <AccordionSection>
            <AccordionSectionSummary>
              <AccordionSectionSummaryHeading aria-controls="content4">
                Ιστορικό
              </AccordionSectionSummaryHeading>
            </AccordionSectionSummary>
            <AccordionSectionContent id="content4">
              <HistoryContent />
            </AccordionSectionContent>
          </AccordionSection>
        </Accordion>
      </Hidden>
    </>
  );
}

export default UsingAccordion;