import React from 'react';
import { List, ListItem } from '@digigov/ui/content/List';
import { Button } from '@digigov/ui/form/Button';
import {
  Breadcrumbs,
  BreadcrumbsList,
  BreadcrumbsListItem,
} from '@digigov/ui/navigation/Breadcrumbs';
import {
  useBreadcrumbs,
  BreadcrumbItem,
} from '@digigov/ui/navigation/Breadcrumbs/hooks';
import { Heading } from '@digigov/ui/typography';

const items: BreadcrumbItem[] = [
  {
    title: 'Νομοθεσία Πυροπροστασίας',
    children: [
      {
        title: 'Εγχειρίδια Νομοθεσίας Πυρασφάλειας',
        pdf: '#',
        href: 'echiridia-nomothesia-pyroprostasias',
      },
      { title: 'Διάγραμμα Ισχύουσας Νομοθεσίας' },
      { title: 'Οδηγίες Επί Προτύπων Πυροπροστασίας' },
      { title: 'Απλουστεύσεις Διαδικασιών' },
      { title: 'Χρήσιμα Έγγραφα' },
      {
        title: 'Νομοθεσία Πυρασφάλειας',
        children: [
          {
            title: 'Λοιπές Δραστηριότητες Εγκαταστάσεις',
          },
          {
            title:
              'Εγκαταστάσεις Πετρελαιοειδών Προϊόντων – Υγραερίου – Φυσικού Αερίου',
          },
          { title: 'Διατάξεις Προληπτικής Πυροπροστασίας' },
          { title: 'Συνδρομητική Νομοθεσία Πυροπροστασίας' },
          {
            title:
              'Δραστηριότητες – Εγκαταστάσεις που δεν υπάγονται σε Νομοθετικό Πλαίσιο',
          },
          {
            title: 'Κανονισμοί Πυροπροστασίας Κτιρίων',
            // href: '/kanonismoi-pyroprostasias',
            children: [
              {
                title: 'Κατοικίες',
              },
              {
                title: 'Εγκαταστάσεις Κεντρικής Θέρμανσης',
              },
              {
                title: 'Προσωρινή Διαμονή (Ξεν/χεία-Κατ/σεις)',
              },
              {
                title: 'Εκπαιδευτήρια',
              },
              {
                title: 'Γραφεία',
              },
              {
                title: 'Εμπόριο (Καταστήματα)',
              },
              {
                title: 'Συνάθροιση Κοινού',
              },
              {
                title: 'Υγεία & Κοινωνική Πρόνοια',
              },
              {
                title: 'Σωφρονισμός',
              },
              {
                title: 'Στάθμευση Αυτοκινήτων',
              },

              {
                title: 'Λοιπές Βιομηχανικές Εγκαταστάσεις',
              },
              {
                title: 'Αποθήκευση',
              },
              {
                title: 'Συνεργεία, ΙΚτέο, Εμπ.Σταθμοί, Κτελ, Πλυντ.-Λιπαντ.',
              },
              {
                title: 'Πρατήρια Υγρών Καυσίμων',
              },
              {
                title: 'Πρατήρια Αερίων Καυσίμων',
              },
              {
                title: 'Μεταποιητικές & Συναφείς Εγκαταστάσεις',
                // href: '/metapoiitikes-egkatastaseis',
                children: [
                  {
                    title: 'ΠΔ 41/2018 & ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
                  },
                  {
                    title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
                  },
                  {
                    title: 'ΠΔ 71/1988 ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
                    children: [
                      { title: 'Γενικές Διατάξεις ΠΔ 41/2018' },
                      { title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018' },
                      {
                        title: 'Γενικές Διατάξεις ΠΔ 71/2018',
                        children: [
                          {
                            title: 'Άρθρο 1: Ορισμοί – Ταξινόμηση Κτιρίων',
                          },
                          {
                            title: 'Άρθρο 2: Οδεύσεις Διαφυγής',
                          },
                          {
                            title: 'Άρθρο 3: Δομική Προστασία',
                          },
                          {
                            title: 'Άρθρο 4: Ενεργητικά Μέτρα Πυροπροστασίας',
                            pdf: '#pdf',
                          },
                          {
                            title:
                              'Άρθρο 14: Παράρτημα Α - Δείκτες Πυραντίστασης',
                          },
                          {
                            title:
                              'Άρθρο 14: Παράρτημα Β – Εσωτερικά Τελειώματα',
                          },
                          {
                            title: 'Άρθρο 15: Εφαρμογή ΠΔ 71/1988',
                          },
                          {
                            title:
                              'Άρθρο 23-24: Έναρξη Εφαρμογής – Καταργούμενες Διατάξεις',
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

// creates the ol>li lists for the items data
const getListChild = (item, setActive) => {
  return item.children ? (
    <>
      <Heading size="sm" mb={0}>
        {item.title}
      </Heading>
      <List listStyle="number">
        {item.children?.map((subMenu, key) => (
          <ListItem key={key}>{getListChild(subMenu, setActive)}</ListItem>
        ))}
      </List>
    </>
  ) : (
    <Button
      variant="link"
      role="menuitem"
      id={item.title}
      onClick={(e) => {
        e.preventDefault();
        setActive(item);
      }}
    >
      {item.title}
    </Button>
  );
};

export const WithHook = (_: any) => {
  // initialUrlRoute: '/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias'
  // is to simulate that the user lands to a specific url
  const { breadcrumbs, setActiveItem } = useBreadcrumbs(
    items,
    '/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias'
  );
  return (
    <>
      {breadcrumbs.length > 1 && (
        <Breadcrumbs mb={8}>
          <BreadcrumbsList>
            {breadcrumbs.map((breadcrumb, index) => (
              <BreadcrumbsListItem
                key={index}
                href={breadcrumbs.length - 1 === index ? undefined : '#'}
                onClick={() => setActiveItem(breadcrumb)}
                ariaCurrent={
                  breadcrumbs.length - 1 === index ? 'page' : undefined
                }
              >
                {breadcrumb.title}
              </BreadcrumbsListItem>
            ))}
          </BreadcrumbsList>
        </Breadcrumbs>
      )}
      {breadcrumbs.length > 0 && (
        <Heading size="xl">
          {breadcrumbs[breadcrumbs.length - 1]?.title}
        </Heading>
      )}
      {items.map((item) => getListChild(item, setActiveItem))}
    </>
  );
};

export default WithHook;