import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { addStoryInGroup, COMPOSITIONS } from '../../../.storybook/utils';
import Button from '../button';
import ButtonGroup from '../buttonGroup';
import DetailPage from './DetailPage';
import Icon from '../icon';
import IconButton from '../iconButton';
import { IconTrashMediumOutline, IconWarningBadgedMediumFilled } from '@teamleader/ui-icons';
import StatusLabel from '../statusLabel';
import { Box } from '../box';
import { Heading1, Monospaced, TextBody } from '../typography';
import { COLOR } from '../../constants';
var defaultDetailPageHeaderProps = {
  backLinkProps: {
    element: 'button',
    children: 'Back to overview'
  },
  title: 'I am the detail page title',
  titleColor: 'teal'
};
var detailPageHeaderArgTypes = {
  backLinkProps: {
    element: {
      control: 'select',
      options: ['a', 'button']
    }
  }
};

var actionButtons = function actionButtons() {
  return /*#__PURE__*/React.createElement(ButtonGroup, {
    marginLeft: 7
  }, /*#__PURE__*/React.createElement(IconButton, {
    icon: /*#__PURE__*/React.createElement(IconTrashMediumOutline, null)
  }), /*#__PURE__*/React.createElement(ButtonGroup, {
    segmented: true
  }, /*#__PURE__*/React.createElement(Button, null, "Open"), /*#__PURE__*/React.createElement(Button, {
    active: true
  }, "Won"), /*#__PURE__*/React.createElement(Button, null, "Lost")));
};

var totals = function totals() {
  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    alignSelf: "flex-end"
  }, /*#__PURE__*/React.createElement(Box, {
    textAlign: "right"
  }, /*#__PURE__*/React.createElement(TextBody, {
    color: "neutral"
  }, /*#__PURE__*/React.createElement("strong", null, "Total")), /*#__PURE__*/React.createElement(Box, {
    alignItems: "center",
    display: "flex"
  }, /*#__PURE__*/React.createElement(Heading1, null, /*#__PURE__*/React.createElement(Monospaced, null, "999h99")), /*#__PURE__*/React.createElement(Icon, {
    color: "gold",
    tint: "dark",
    marginLeft: 2
  }, /*#__PURE__*/React.createElement(IconWarningBadgedMediumFilled, null)))), /*#__PURE__*/React.createElement(Box, {
    textAlign: "right",
    marginLeft: 7
  }, /*#__PURE__*/React.createElement(TextBody, {
    color: "neutral"
  }, /*#__PURE__*/React.createElement("strong", null, "Total")), /*#__PURE__*/React.createElement(Box, {
    alignItems: "center",
    display: "flex"
  }, /*#__PURE__*/React.createElement(Heading1, null, /*#__PURE__*/React.createElement(Monospaced, null, "999h99")), /*#__PURE__*/React.createElement(Icon, {
    color: "gold",
    tint: "dark",
    marginLeft: 2
  }, /*#__PURE__*/React.createElement(IconWarningBadgedMediumFilled, null)))), /*#__PURE__*/React.createElement(Box, {
    textAlign: "right",
    marginLeft: 7
  }, /*#__PURE__*/React.createElement(TextBody, {
    color: "neutral"
  }, /*#__PURE__*/React.createElement("strong", null, "Total")), /*#__PURE__*/React.createElement(Box, {
    alignItems: "center",
    display: "flex"
  }, /*#__PURE__*/React.createElement(Heading1, null, /*#__PURE__*/React.createElement(Monospaced, null, "999h99")), /*#__PURE__*/React.createElement(Icon, {
    color: "gold",
    tint: "dark",
    marginLeft: 2
  }, /*#__PURE__*/React.createElement(IconWarningBadgedMediumFilled, null)))));
};

export default {
  component: DetailPage,
  title: addStoryInGroup(COMPOSITIONS, 'DetailPage'),
  parameters: {
    backgrounds: {
      default: 'Neutral light',
      values: [{
        name: 'Neutral lightest',
        value: COLOR.NEUTRAL.LIGHTEST
      }, {
        name: 'Neutral light',
        value: COLOR.NEUTRAL.LIGHT
      }]
    },
    info: {
      propTables: false
    }
  }
};
export var body = function body() {
  return /*#__PURE__*/React.createElement(DetailPage.Body, null, /*#__PURE__*/React.createElement(TextBody, null, "Here you can add arbitrary content."));
};
body.storyName = 'Body';
body.parameters = {
  info: {
    propTables: [DetailPage.Body]
  }
};
export var header = function header(args) {
  return /*#__PURE__*/React.createElement(DetailPage.Header, args);
};
header.storyName = 'Header';
header.args = defaultDetailPageHeaderProps;
header.argTypes = detailPageHeaderArgTypes;
header.parameters = {
  info: {
    propTables: [DetailPage.Header]
  }
};
export var headerWithTitleSuffix = function headerWithTitleSuffix(args) {
  return /*#__PURE__*/React.createElement(DetailPage.Header, _extends({}, args, {
    titleSuffix: /*#__PURE__*/React.createElement(StatusLabel, {
      color: "violet"
    }, "Draft")
  }));
};
headerWithTitleSuffix.storyName = 'Header with title suffix';
headerWithTitleSuffix.args = defaultDetailPageHeaderProps;
headerWithTitleSuffix.argTypes = detailPageHeaderArgTypes;
headerWithTitleSuffix.parameters = {
  info: {
    propTables: [DetailPage.Header]
  }
};
export var headerWithActions = function headerWithActions(args) {
  return /*#__PURE__*/React.createElement(DetailPage.Header, args, actionButtons());
};
headerWithActions.storyName = 'Header with actions';
headerWithActions.args = defaultDetailPageHeaderProps;
headerWithActions.argTypes = detailPageHeaderArgTypes;
headerWithActions.parameters = {
  info: {
    propTables: [DetailPage.Header]
  }
};
export var headerWithTotals = function headerWithTotals(args) {
  return /*#__PURE__*/React.createElement(DetailPage.Header, args, totals());
};
headerWithTotals.storyName = 'Header with totals';
headerWithTotals.args = defaultDetailPageHeaderProps;
headerWithTotals.argTypes = detailPageHeaderArgTypes;
headerWithTotals.parameters = {
  info: {
    propTables: [DetailPage.Header]
  }
};
export var headerWithTotalsAndActions = function headerWithTotalsAndActions(args) {
  return /*#__PURE__*/React.createElement(DetailPage.Header, args, totals(), actionButtons());
};
headerWithTotalsAndActions.storyName = 'Header with totals and actions';
headerWithTotalsAndActions.args = defaultDetailPageHeaderProps;
headerWithTotalsAndActions.argTypes = detailPageHeaderArgTypes;
headerWithTotalsAndActions.parameters = {
  info: {
    propTables: [DetailPage.Header]
  }
};
export var headerWithEverthingTogether = function headerWithEverthingTogether(args) {
  return /*#__PURE__*/React.createElement(DetailPage.Header, _extends({}, args, {
    titleSuffix: /*#__PURE__*/React.createElement(StatusLabel, {
      color: "violet"
    }, "Draft")
  }), totals(), actionButtons());
};
headerWithEverthingTogether.storyName = 'Header with everything together';
headerWithEverthingTogether.args = defaultDetailPageHeaderProps;
headerWithEverthingTogether.argTypes = detailPageHeaderArgTypes;
headerWithEverthingTogether.parameters = {
  info: {
    propTables: [DetailPage.Header]
  }
};
export var composition = function composition() {
  return /*#__PURE__*/React.createElement(DetailPage, null, /*#__PURE__*/React.createElement(DetailPage.Header, defaultDetailPageHeaderProps), /*#__PURE__*/React.createElement(DetailPage.Body, null, /*#__PURE__*/React.createElement(TextBody, null, "Here you can add arbitrary content.")));
};
composition.storyName = 'Composition';
composition.parameters = {
  info: {
    propTables: [DetailPage]
  }
};