import React, { useState, useEffect } from 'react';
import {
  StepNav,
  StepNavCircleNumber,
  StepNavControls,
  StepNavList,
  StepNavListItem,
  StepNavAccordion,
  StepNavAccordionContent,
  StepNavAccordionSummary,
  StepNavAccordionSummaryHeading,
  StepNavAccordionHeadingTitle,
  StepNavAccordionHeadingText,
} from '@digigov/ui/content/StepNav';
import {
  SummaryList,
  SummaryListItem,
  SummaryListItemAction,
  SummaryListItemKey,
  SummaryListItemValue,
} from '@digigov/ui/content/SummaryList';
import { Button, ButtonGroup } from '@digigov/ui/form/Button';
import { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

const data = [
  {
    title: 'Απάντηση',
    codename: '(KEP-APA)',
    date: '7 Απριλίου 2023, 12:32μ.μ.',
    details: [
      {
        name: 'Ημερομηνία',
        value: '7 Απριλίου 2023, 12:32μ.μ.',
      },
      {
        name: 'Χειριστής',
        value: 'Καλλιόπη Παπαδοπούλου',
        actions: ['Ανάθεση'],
      },
      {
        name: 'Κωδικός επαλήθευσης',
        value: '637283494',
      },
      {
        name: 'Κατάσταση',
        value: 'Εισερχόμενη',
        actions: ['Αλλαγή'],
      },
    ],
  },
  {
    title: 'Συμπληρωματικά έγγραφα ',
    codename: '(MORE-DOCS)',
    date: '5 Απριλίου 2023, 8:32π.μ.',
    details: [
      {
        name: 'Ημερομηνία',
        value: '7 Απριλίου 2023, 12:32μ.μ.',
      },
      {
        name: 'Χειριστής',
        value: 'Μαρία Φλούπη',
        actions: ['Ανάθεση'],
      },
      {
        name: 'Κωδικός επαλήθευσης',
        value: '637283494',
      },
      {
        name: 'Κατάσταση',
        value: 'Εισερχόμενη',
        actions: ['Αλλαγή'],
      },
    ],
  },
  {
    title: 'Αίτηση για συμπληρωματικά έγγραφα',
    codename: '(MORE-DOCS-REQUEST)',
    date: '5 Απριλίου 2023, 8:32π.μ.',
    details: [
      {
        name: 'Ημερομηνία',
        value: '5 Απριλίου 2023, 8:32π.μ.',
      },
      {
        name: 'Χειριστής',
        value: 'Μαρία Φλούπη',
        actions: ['Ανάθεση'],
      },
      {
        name: 'Κωδικός επαλήθευσης',
        value: '974256',
      },
      {
        name: 'Κατάσταση',
        value: 'Εισερχόμενη',
        actions: ['Αλλαγή'],
      },
    ],
  },
  {
    title: 'Αίτηση Βεβαίωσης Μόνιμης Κατοικίας',
    codename: '(PERMRES-FOREIS)',
    date: '3 Απριλίου 2023, 5:42μ.μ.',
    actions: [
      {
        label: 'Απάντηση',
      },
      {
        label: 'Αίτημα για συμπληρωματικά έγγραφα',
      },
    ],
    details: [
      {
        name: 'Ημερομηνία',
        value: '3 Απριλίου 2023, 5:42μ.μ.',
      },
      {
        name: 'Χειριστής',
        value: 'Μαρία Φλούπη',
        actions: ['Ανάθεση'],
      },
      {
        name: 'Κωδικός επαλήθευσης',
        value: '475747',
      },
      {
        name: 'Κατάσταση',
        value: 'Εισερχόμενη',
        actions: ['Αλλαγή'],
      },
    ],
  },
];

export const WithHints = (_: any) => {
  const [open, SetOpen] = useState<boolean>(false);
  const [openItem, setOpenItem] = useState(
    Array<boolean>(data.length).fill(false)
  );
  useEffect(() => {
    const stateArray: boolean[] = [];
    if (open === false) {
      openItem.map(() => {
        stateArray.push(false);
      });
      setOpenItem(stateArray);
    } else {
      openItem.map(() => {
        stateArray.push(true);
      });
      setOpenItem(stateArray);
    }
  }, [open]);

  function openCloseItem(index): void {
    const statusOpenItem = [...openItem];
    statusOpenItem[index] = !statusOpenItem[index];
    setOpenItem(statusOpenItem);
  }

  function openCloseAll(): void {
    SetOpen(!open);
  }
  return (
    <StepNav>
      <StepNavControls>
        <Button
          variant="link"
          onClick={() => {
            openCloseAll();
          }}
        >
          {open === false ? 'Εμφάνιση όλων' : 'Απόκρυψη όλων'}
        </Button>
      </StepNavControls>
      <StepNavList>
        {data &&
          data.map((field, index) => {
            return (
              <StepNavListItem key={index}>
                <StepNavAccordion open={open}>
                  <StepNavAccordionSummary
                    onClick={() => {
                      openCloseItem(index);
                    }}
                  >
                    <StepNavAccordionSummaryHeading aria-controls="content1">
                      <StepNavCircleNumber border={false}></StepNavCircleNumber>
                      {index === 1 ? (
                        <StepNavCircleNumber border={false}>
                          <VisuallyHidden>Βήμα</VisuallyHidden>
                          και
                        </StepNavCircleNumber>
                      ) : (
                        <StepNavCircleNumber>
                          <VisuallyHidden>Βήμα</VisuallyHidden>
                          {index > 1 ? index : index + 1}
                        </StepNavCircleNumber>
                      )}
                      <StepNavAccordionHeadingTitle>
                        <StepNavAccordionHeadingText>
                          {field.title}
                          {field.codename && (
                            <>
                              {' - '} {field.codename}
                            </>
                          )}
                        </StepNavAccordionHeadingText>
                        <Hint fontSize={14}>{field.date}</Hint>
                      </StepNavAccordionHeadingTitle>
                    </StepNavAccordionSummaryHeading>
                  </StepNavAccordionSummary>
                  <StepNavAccordionContent id="content1">
                    <ButtonGroup>
                      {(field.actions || []).map((action, subIndex) => (
                        <Button color="primary" key={subIndex}>
                          {action.label}
                        </Button>
                      ))}
                      <Button color="secondary">Προβολή εγγράφου</Button>
                      <Button color="secondary">Λήψη PDF</Button>
                      <Button color="secondary">Προώθηση εγγράφου</Button>
                    </ButtonGroup>
                    {field.details && (
                      <SummaryList>
                        {field.details.map((field, index) => {
                          return (
                            <SummaryListItem key={index}>
                              <SummaryListItemKey>
                                {field.name}
                              </SummaryListItemKey>
                              <SummaryListItemValue>
                                {field.value}
                              </SummaryListItemValue>
                              {field.actions && (
                                <SummaryListItemAction>
                                  <ButtonGroup>
                                    {field.actions &&
                                      field.actions.map((action, subIndex) => {
                                        return (
                                          <Button key={subIndex} variant="link">
                                            {action}
                                          </Button>
                                        );
                                      })}
                                  </ButtonGroup>
                                </SummaryListItemAction>
                              )}
                            </SummaryListItem>
                          );
                        })}
                      </SummaryList>
                    )}
                  </StepNavAccordionContent>
                </StepNavAccordion>
              </StepNavListItem>
            );
          })}
      </StepNavList>
    </StepNav>
  );
};

export default WithHints;