import React from 'react';
import { Box, Button, Flexbox, Icon, Typography } from '../..';
import { isElement } from '../../common/utils';
import ProgressDonutChart from './ProgressDonutChart';
var Title = function Title(_ref) {
  var percentageCompleted = _ref.percentageCompleted,
    _ref$maxPercentage = _ref.maxPercentage,
    maxPercentage = _ref$maxPercentage === void 0 ? 100 : _ref$maxPercentage,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? 'Default list title' : _ref$title,
    description = _ref.description,
    viewAllLabel = _ref.viewAllLabel,
    displayMode = _ref.displayMode,
    _ref$showProgress = _ref.showProgress,
    showProgress = _ref$showProgress === void 0 ? true : _ref$showProgress,
    _ref$onViewAll = _ref.onViewAll,
    onViewAll = _ref$onViewAll === void 0 ? function () {} : _ref$onViewAll,
    onClose = _ref.onClose;
  return displayMode === 'DRAWER' ? React.createElement(Box, {
    py: 4
  }, React.createElement(Flexbox, {
    container: true,
    gap: 5,
    justifyContent: "center",
    direction: "column",
    alignItems: "center"
  }, showProgress && percentageCompleted && React.createElement(ProgressDonutChart, {
    completed: percentageCompleted,
    total: maxPercentage,
    size: "l"
  }), React.createElement(Flexbox, {
    container: true,
    item: true,
    direction: "column",
    alignItems: "center"
  }, isElement(description) && description || React.createElement(Typography, {
    type: "title3",
    weight: "bold",
    color: function color(t) {
      return t.colorTokens.action.text_default;
    }
  }, description)))) : React.createElement(Flexbox, {
    container: true,
    gap: 5,
    alignItems: "center"
  }, showProgress && percentageCompleted && React.createElement(Flexbox, {
    item: true,
    shrink: 0
  }, React.createElement(ProgressDonutChart, {
    completed: percentageCompleted,
    total: maxPercentage,
    size: "s"
  })), React.createElement(Flexbox, {
    container: true,
    item: true,
    direction: "column",
    grow: 1,
    gap: 0,
    sm: {
      gap: 1
    }
  }, React.createElement(Typography, {
    type: "title3"
  }, title), isElement(description) && description || React.createElement(Typography, {
    type: "secondary"
  }, description)), viewAllLabel && React.createElement(Flexbox, {
    item: true,
    shrink: 0
  }, React.createElement(Button.Pill, {
    variant: "tertiary",
    size: "m",
    onClick: onViewAll,
    "data-custom-prevent-click-outside": true
  }, viewAllLabel)), percentageCompleted === maxPercentage && onClose && React.createElement(Button.Icon, {
    onClick: onClose
  }, React.createElement(Icon.Cross16, null)));
};
export default Title;