import React from 'react';
import styled from 'styled-components';
import Typography from '../../../Atoms/Typography';
import Box from '../../../Atoms/Box';
import Button from '../../Button';
import Status from '../Status';
import { HORIZONTAL_PADDING, HORIZONTAL_PADDING_DESKTOP, listReset, SPACE_TO_STEP_NUMBER, STEP_NUMBER_SIZE, VERTICAL_PADDING } from '../constants';
var OrderedList = styled.ol.withConfig({
  displayName: "SubLevel__OrderedList",
  componentId: "sc-68jn3c-0"
})(["", " padding-bottom:", "px;"], listReset, function (p) {
  return p.theme.spacing.unit(VERTICAL_PADDING);
});
var ListItem = styled.li.withConfig({
  displayName: "SubLevel__ListItem",
  componentId: "sc-68jn3c-1"
})(["display:block;& + &{padding-top:", "px;}"], function (p) {
  return p.theme.spacing.unit(2);
});
export var SubLevel = function SubLevel(_ref) {
  var onStepClick = _ref.onStepClick,
    _ref$steps = _ref.steps,
    steps = _ref$steps === void 0 ? [] : _ref$steps,
    titleDone = _ref.titleDone,
    titleNotDone = _ref.titleNotDone;
  var contentPadding = HORIZONTAL_PADDING + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER;
  var contentPaddingDesktop = HORIZONTAL_PADDING_DESKTOP + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER;
  return React.createElement(OrderedList, null, steps === null || steps === void 0 ? void 0 : steps.map(function (step) {
    var current = step.current,
      done = step.done,
      name = step.name,
      label = step.label;
    return React.createElement(ListItem, {
      key: step.label
    }, React.createElement(Box, {
      pl: contentPadding,
      pr: HORIZONTAL_PADDING,
      sm: {
        pl: contentPaddingDesktop,
        pr: HORIZONTAL_PADDING_DESKTOP
      }
    }, current || done ? React.createElement(Button, {
      onClick: function onClick() {
        return onStepClick && onStepClick(name);
      },
      variant: "neutral"
    }, React.createElement(Typography, {
      color: function color(t) {
        return current ? t.color.text : t.color.disabledText;
      },
      type: "secondary",
      weight: current ? 'bold' : 'regular'
    }, React.createElement(Status, {
      done: done,
      noIcons: true,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label)) : React.createElement(Typography, {
      color: function color(t) {
        return t.color.disabledText;
      },
      type: "secondary"
    }, React.createElement(Status, {
      done: done,
      noIcons: true,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label)));
  }));
};