import React from 'react';
import {
  StepNavCircleNumber,
  StepNavControls,
  StepNavList,
  StepNavListItem,
  StepNavAccordionContent,
  StepNavAccordionSummary,
  StepNavAccordionSummaryHeading,
  StepNavAccordionHeadingTitle,
  StepNavAccordionHeadingText,
} from '@digigov/ui/content/StepNav';
import {
  StepNavAuto,
  StepNavAccordionAuto,
  StepNavCloseAllButtonAuto,
  StepNavOpenAllButtonAuto,
} from '@digigov/ui/content/StepNav/auto';

import {
  SummaryList,
  SummaryListItem,
  SummaryListItemAction,
  SummaryListItemKey,
  SummaryListItemValue,
} from '@digigov/ui/content/SummaryList';
import { Button, ButtonGroup } from '@digigov/ui/form/Button';
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 Auto = (_: any) => {
  return (
    <StepNavAuto defaultOpen={'1'} singleOpen>
      <StepNavControls>
        <StepNavOpenAllButtonAuto>Εμφάνιση όλων</StepNavOpenAllButtonAuto>
        <StepNavCloseAllButtonAuto>Απόκρυψη όλων</StepNavCloseAllButtonAuto>
      </StepNavControls>
      <StepNavList>
        {data &&
          data.map((field, index) => {
            return (
              <StepNavListItem key={index}>
                <StepNavAccordionAuto id={`${index}`}>
                  <StepNavAccordionSummary>
                    <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>
                      </StepNavAccordionHeadingTitle>
                    </StepNavAccordionSummaryHeading>
                  </StepNavAccordionSummary>
                  <StepNavAccordionContent id="content1">
                    <ButtonGroup>
                      {(field.actions || []).map((action, subIndex) => (
                        <Button color="primary" key={subIndex}>
                          {action.label}
                        </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>
                </StepNavAccordionAuto>
              </StepNavListItem>
            );
          })}
      </StepNavList>
    </StepNavAuto>
  );
};

export default Auto;