import React from 'react';
import styled from 'styled-components';
import Box from '../../../Atoms/Box';
import Button from '../../Button';
import Typography from '../../../Atoms/Typography';
import { SubLevel } from '../SubLevel';
import Status from '../Status';
import { listReset, HORIZONTAL_PADDING, HORIZONTAL_PADDING_DESKTOP, SPACE_TO_STEP_NUMBER, STEP_NUMBER_SIZE, VERTICAL_PADDING } from '../constants';
import { Flexbox, Media, Icon } from '../../..';
var contentLeftPadding = HORIZONTAL_PADDING + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER;
var contentLeftPaddingDesktop = HORIZONTAL_PADDING_DESKTOP + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER;
var StyledOrderedList = styled.ol.withConfig({
  displayName: "TopLevel__StyledOrderedList",
  componentId: "sc-nlt88k-0"
})(["", ""], listReset);
var MobileProgressLevels = styled.ol.withConfig({
  displayName: "TopLevel__MobileProgressLevels",
  componentId: "sc-nlt88k-1"
})(["", ""], listReset);
var Wrapper = styled.div.withConfig({
  displayName: "TopLevel__Wrapper",
  componentId: "sc-nlt88k-2"
})([""]);
var ListItem = styled.li.withConfig({
  displayName: "TopLevel__ListItem",
  componentId: "sc-nlt88k-3"
})(["display:block;position:relative;background-color:", ";border-radius:", ";", "{border-radius:0;}&::before{content:'';display:block;background:", ";width:", ";height:100%;position:absolute;top:0;left:0;transition:opacity 0.16s ease-out;opacity:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";", "{width:2px;border-radius:0;}}", "{& + &::after{content:'';display:block;height:1px;box-sizing:border-box;background-color:", ";position:absolute;top:0;left:", "px;right:", "px;}}", "{& + & ", "{margin-top:", "px;}}"], function (p) {
  return p.theme.color.inputBackground;
}, function (_ref) {
  var theme = _ref.theme;
  return theme.borderRadius8;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.media.lessThan(theme.breakpoints.sm);
}, function (p) {
  return p.theme.colorTokens.action.border_default;
}, function (p) {
  return p.$isInDrawer ? '2px' : '8px';
}, function (p) {
  return p.$current ? 1 : 0;
}, function (p) {
  return p.$isInDrawer ? 0 : p.theme.borderRadius8;
}, function (p) {
  return p.$isInDrawer ? 0 : p.theme.borderRadius8;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.media.lessThan(theme.breakpoints.sm);
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.media.lessThan(theme.breakpoints.md);
}, function (p) {
  return p.theme.color.divider;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.spacing.unit(3);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.spacing.unit(3);
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.media.greaterThan(theme.breakpoints.md);
}, Wrapper, function (p) {
  return p.theme.spacing.unit(2);
});
var Content = styled(Box).withConfig({
  displayName: "TopLevel__Content",
  componentId: "sc-nlt88k-4"
})(["position:relative;"]);
var StyledButton = styled(Button).withConfig({
  displayName: "TopLevel__StyledButton",
  componentId: "sc-nlt88k-5"
})(["justify-content:flex-start;"]);
var StyledMobileButton = styled(StyledButton).withConfig({
  displayName: "TopLevel__StyledMobileButton",
  componentId: "sc-nlt88k-6"
})(["& > span{width:100%;}"]);
var ProgressLevels = function ProgressLevels(_ref8) {
  var steps = _ref8.steps,
    onStepClick = _ref8.onStepClick,
    onSubStepClick = _ref8.onSubStepClick,
    titleDone = _ref8.titleDone,
    titleNotDone = _ref8.titleNotDone,
    isInDrawer = _ref8.isInDrawer;
  return React.createElement(StyledOrderedList, null, steps && (steps === null || steps === void 0 ? void 0 : steps.map(function (step, i) {
    var current = step.current,
      done = step.done,
      label = step.label,
      name = step.name,
      _step$steps = step.steps,
      substeps = _step$steps === void 0 ? [] : _step$steps;
    var number = i + 1;
    return React.createElement(ListItem, {
      key: label,
      $current: current,
      $isInDrawer: isInDrawer
    }, current || done ? React.createElement(Wrapper, null, React.createElement(StyledButton, {
      onClick: function onClick() {
        return onStepClick && onStepClick(name);
      },
      variant: "neutral",
      fullWidth: true
    }, React.createElement(Typography, {
      type: "primary",
      weight: current ? 'bold' : 'regular'
    }, React.createElement(Content, {
      py: VERTICAL_PADDING,
      pr: HORIZONTAL_PADDING,
      pl: contentLeftPadding,
      sm: {
        pl: contentLeftPaddingDesktop,
        pr: HORIZONTAL_PADDING_DESKTOP
      }
    }, React.createElement(Status, {
      current: current,
      done: done,
      number: number,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label)))) : React.createElement(Wrapper, null, React.createElement(Typography, {
      color: function color(t) {
        return t.color.disabledText;
      },
      type: "primary"
    }, React.createElement(Content, {
      py: VERTICAL_PADDING,
      pr: HORIZONTAL_PADDING,
      pl: contentLeftPadding,
      sm: {
        pl: contentLeftPaddingDesktop
      }
    }, React.createElement(Status, {
      current: current,
      done: done,
      number: number,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label))), substeps.length > 0 && current && React.createElement(SubLevel, {
      onStepClick: onSubStepClick,
      steps: substeps,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }));
  })));
};
export var TopLevel = function TopLevel(_ref9) {
  var drawerOpen = _ref9.drawerOpen,
    onStepClick = _ref9.onStepClick,
    onSubStepClick = _ref9.onSubStepClick,
    onMobileStepClick = _ref9.onMobileStepClick,
    _ref9$steps = _ref9.steps,
    steps = _ref9$steps === void 0 ? [] : _ref9$steps,
    titleDone = _ref9.titleDone,
    titleNotDone = _ref9.titleNotDone,
    _ref9$isInDrawer = _ref9.isInDrawer,
    isInDrawer = _ref9$isInDrawer === void 0 ? false : _ref9$isInDrawer;
  if (isInDrawer) {
    return React.createElement(ProgressLevels, {
      steps: steps,
      onStepClick: onStepClick,
      onSubStepClick: onSubStepClick,
      titleDone: titleDone,
      titleNotDone: titleNotDone,
      isInDrawer: true
    });
  }
  return React.createElement(React.Fragment, null, React.createElement(Media, {
    query: function query(t) {
      return t.media.greaterThan(t.breakpoints.md.size);
    }
  }, React.createElement(ProgressLevels, {
    steps: steps,
    onStepClick: onStepClick,
    onSubStepClick: onSubStepClick,
    titleDone: titleDone,
    titleNotDone: titleNotDone
  })), React.createElement(Media, {
    query: function query(t) {
      return t.media.lessThan(t.breakpoints.md);
    }
  }, React.createElement(MobileProgressLevels, null, steps && (steps === null || steps === void 0 ? void 0 : steps.map(function (step, i) {
    var current = step.current,
      done = step.done,
      label = step.label;
    var number = i + 1;
    if (!current) {
      return null;
    }
    return React.createElement(ListItem, {
      key: label,
      $current: current
    }, React.createElement(StyledMobileButton, {
      onClick: function onClick() {
        return onMobileStepClick && onMobileStepClick();
      },
      variant: "neutral",
      "aria-expanded": drawerOpen,
      fullWidth: true
    }, React.createElement(Typography, {
      type: "primary",
      weight: current ? 'bold' : 'regular'
    }, React.createElement(Content, {
      py: VERTICAL_PADDING,
      pr: HORIZONTAL_PADDING,
      pl: contentLeftPadding,
      sm: {
        pl: contentLeftPaddingDesktop,
        pr: HORIZONTAL_PADDING_DESKTOP
      }
    }, React.createElement(Flexbox, {
      container: true,
      justifyContent: "space-between",
      alignItems: "center"
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Status, {
      current: current,
      done: done,
      number: number,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Icon.ChevronDown8, {
      color: function color(t) {
        return t.color.svgFill;
      }
    })))))));
  })))));
};