import React from 'react';
import {
  SummaryList,
  SummaryListItem,
  SummaryListItemAction,
  SummaryListItemKey,
  SummaryListItemValue,
} from '@digigov/ui/content/SummaryList';
import {
  Timeline,
  TimelineItem,
  TimelineHeading,
  TimelineContent,
  TimelineActions,
} from '@digigov/ui/content/Timeline';
import { Button, ButtonGroup } from '@digigov/ui/form/Button';
import { Hint } from '@digigov/ui/typography/Hint';

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 Default = (_: any) => (
  <Timeline>
    {data &&
      data.map((field, index) => {
        return (
          <TimelineItem key={index}>
            <TimelineHeading size="md">
              {field.title}
              {field.codename && (
                <>
                  {' - '} {field.codename}
                </>
              )}
            </TimelineHeading>
            <Hint>{field.date}</Hint>
            <TimelineContent>
              {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>
              )}
            </TimelineContent>
            <TimelineActions>
              <ButtonGroup>
                {(field.actions || []).map((action, subIndex) => (
                  <Button key={subIndex} variant="link">
                    {action.label}
                  </Button>
                ))}
                <Button color="secondary" variant="link">
                  Προβολή εγγράφου
                </Button>
                <Button color="secondary" variant="link">
                  Λήψη PDF
                </Button>
              </ButtonGroup>
            </TimelineActions>
          </TimelineItem>
        );
      })}
  </Timeline>
);

export default Default;