import React from 'react';

import {
  SummaryList,
  SummaryListItem,
  SummaryListItemAction,
  SummaryListItemKey,
} from '@digigov/ui/content/SummaryList';

import {
  TaskList,
  TaskListItem,
  TaskListItemHeading,
  TaskListItemContent,
  TaskListItemTag,
} from '@digigov/ui/content/TaskList';
import { LinkBase } from '@digigov/ui/navigation/Link';

const fields = [
  {
    title: 'Έλεγχοι πριν ξεκινήσετε',
    tasks: [
      {
        text: 'Ελέγξτε την καταλληλότητα',
        status: 'Ολοκληρωθηκε',
      },
      {
        text: 'Εμφάνιση δήλωσης',
        status: 'Ολοκληρωθηκε',
      },
    ],
  },
  {
    title: 'Προετοιμασία αίτησης',
    tasks: [
      {
        text: 'Στοιχεία εταιρείας',
        status: 'Ολοκληρωθηκε',
      },
      {
        text: 'Στοιχεία επικοινωνίας',
        status: 'Σε εξελιξη',
      },
      {
        text: 'Λίστα αποδείξεων',
        status: 'Δεν εχει ξεκινησει',
      },
      {
        text: 'Παροχή οικονομικών στοιχείων',
        status: 'Σε αναμονη',
      },
      {
        text: 'Παροχή ιατρικών πληροφοριών',
        status: 'Σε αναμονη',
      },
    ],
  },
  {
    title: 'Αίτηση',
    tasks: [
      {
        text: 'Υποβολή και πληρωμή',
        status: 'Σε αναμονη',
      },
    ],
  },
];

export const Dense = (_: any) => (
  <div>
    <TaskList dense>
      {fields &&
        fields.map((field, index) => {
          return (
            <TaskListItem key={index}>
              <TaskListItemHeading size="md">{`${index + 1}. ${
                field.title
              }`}</TaskListItemHeading>
              <TaskListItemContent>
                <SummaryList>
                  {field.tasks.map((task, key) => {
                    let tagColor;
                    switch (task.status) {
                      case 'Ολοκληρωθηκε':
                        tagColor = 'info';
                        break;
                      case 'Σε εξελιξη':
                        tagColor = 'primary';
                        break;
                      case 'Δεν εχει ξεκινησει':
                        tagColor = 'secondary';
                        break;
                      case 'Σε αναμονη':
                        tagColor = 'secondary';
                        break;
                    }
                    return (
                      <SummaryListItem key={key}>
                        <SummaryListItemKey>
                          <LinkBase>{task.text}</LinkBase>
                        </SummaryListItemKey>
                        <SummaryListItemAction>
                          <TaskListItemTag color={tagColor}>
                            {task.status}
                          </TaskListItemTag>
                        </SummaryListItemAction>
                      </SummaryListItem>
                    );
                  })}
                </SummaryList>
              </TaskListItemContent>
            </TaskListItem>
          );
        })}
    </TaskList>
  </div>
);

export default Dense;