import _propOr from "ramda/src/propOr";
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import styled from 'styled-components';
import MD from 'react-markdown';
import copy from 'copy-to-clipboard';
import { Box, Button, createTheme, Flexbox, Icon, Table, Tbody, Td, Th, Thead, theme, Tooltip, Tr, Typography } from '..';
import defaultColors from './defaultColors';
import accessabilityColors from './accessabilityColors';
import colorDocs from './Colors.md';
import { flattenObject } from '../common/utils';
var Color = styled.div.withConfig({
  displayName: "Themestories__Color",
  componentId: "sc-skwibd-0"
})(["width:", "px;height:", "px;background-color:", ";border:1px solid #eee;"], function (p) {
  return p.theme.spacing.unit(14);
}, function (p) {
  return p.theme.spacing.unit(14);
}, function (p) {
  return p.$color;
});
var TokenColor = styled.div.withConfig({
  displayName: "Themestories__TokenColor",
  componentId: "sc-skwibd-1"
})(["width:60%;height:", "px;background-color:", ";border-radius:6px;margin-left:", "px;"], function (p) {
  return p.theme.spacing.unit(16);
}, function (p) {
  return p.$color;
}, function (p) {
  return p.theme.spacing.unit(5);
});
var ColorInArray = styled.div.withConfig({
  displayName: "Themestories__ColorInArray",
  componentId: "sc-skwibd-2"
})(["width:", "px;height:", "px;padding:0;background-color:", ";border:1px solid #eee;"], function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.$color;
});
var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "Themestories__StyledFlexbox",
  componentId: "sc-skwibd-3"
})(["background:", ";color:", ";border-radius:6px;max-width:fit-content;padding:", "px ", "px;"], function (p) {
  return p.theme.colorTokens.accent.background_default;
}, function (p) {
  return p.theme.colorTokens.neutral.text_strong;
}, function (p) {
  return p.theme.spacing.unit(1);
}, function (p) {
  return p.theme.spacing.unit(2);
});
var StyledButton = styled(Button).withConfig({
  displayName: "Themestories__StyledButton",
  componentId: "sc-skwibd-4"
})(["color:inherit;&:hover{color:", ";}"], function (p) {
  return p.theme.colorTokens.accent.background_strong;
});
var colorWithValue = function colorWithValue(color) {
  return typeof color === 'string' ? React.createElement(React.Fragment, null, React.createElement(Color, {
    $color: color
  }), React.createElement(React.Fragment, null, color)) : color === null || color === void 0 ? void 0 : color.map(function (c) {
    return React.createElement(Flexbox, {
      key: c,
      container: true,
      gap: 1
    }, React.createElement(ColorInArray, {
      $color: c
    }), React.createElement(React.Fragment, null, c));
  });
};
var TokenName = function TokenName(_ref) {
  var title = _ref.title;
  var _useState = useState('Copy to clipboard'),
    _useState2 = _slicedToArray(_useState, 2),
    label = _useState2[0],
    setLabel = _useState2[1];
  var copyTokenName = function copyTokenName(tokenName) {
    copy(tokenName);
    setLabel('Copied!');
  };
  return React.createElement(StyledFlexbox, {
    container: true,
    alignItems: "center",
    gap: 2
  }, title, React.createElement(Tooltip, {
    label: label,
    position: "right",
    invertedColors: true
  }, React.createElement(StyledButton, {
    variant: "neutral",
    onClick: function onClick() {
      return copyTokenName(title);
    }
  }, React.createElement(Icon.Copy16, {
    color: "inherit"
  }))));
};
export default {
  title: 'Others / Theme'
};
export var Documentation = function Documentation() {
  return React.createElement(MD, null, colorDocs);
};
export var ColorsSemantic = {
  render: function render() {
    var _Object$keys;
    var a11yTheme = createTheme({
      a11yColors: true
    });
    var darkTheme = createTheme({
      darkColors: true
    });
    return React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, "Name"), React.createElement(Th, null, "Default"), React.createElement(Th, null, "A11y"), React.createElement(Th, null, "Dark"))), React.createElement(Tbody, null, (_Object$keys = Object.keys(theme.color)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (title) {
      return React.createElement(Tr, {
        key: "theme-".concat(title)
      }, React.createElement(Td, null, title), React.createElement(Td, null, colorWithValue(theme.color[title])), React.createElement(Td, null, colorWithValue(a11yTheme.color[title])), React.createElement(Td, null, colorWithValue(darkTheme.color[title])));
    })));
  },
  name: 'Colors (semantic) deprecated'
};
export var DesignTokensLightColors = function DesignTokensLightColors() {
  var _Object$keys2;
  var _createTheme = createTheme(),
    colorTokens = _createTheme.colorTokens;
  var flattenedColorTokens = flattenObject(colorTokens);
  return React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, React.createElement(Box, {
    ml: 5
  }, "Color")), React.createElement(Th, null, "Token name"), React.createElement(Th, null, "Value"))), React.createElement(Tbody, null, (_Object$keys2 = Object.keys(flattenedColorTokens)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.map(function (title) {
    return React.createElement(Tr, {
      key: title
    }, React.createElement(Td, null, React.createElement(TokenColor, {
      $color: flattenedColorTokens[title]
    })), React.createElement(Td, null, React.createElement(TokenName, {
      title: title
    })), React.createElement(Td, null, flattenedColorTokens[title]));
  })));
};
export var DesignTokensA11yColors = {
  render: function render() {
    var _Object$keys3;
    var _createTheme2 = createTheme({
        tokensTheme: 'a11y'
      }),
      colorTokens = _createTheme2.colorTokens;
    var flattenedColorTokens = flattenObject(colorTokens);
    return React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, React.createElement(Box, {
      ml: 5
    }, "Color")), React.createElement(Th, null, "Token name"), React.createElement(Th, null, "Value"))), React.createElement(Tbody, null, (_Object$keys3 = Object.keys(flattenedColorTokens)) === null || _Object$keys3 === void 0 ? void 0 : _Object$keys3.map(function (title) {
      return React.createElement(Tr, {
        key: title
      }, React.createElement(Td, null, React.createElement(TokenColor, {
        $color: flattenedColorTokens[title]
      })), React.createElement(Td, null, React.createElement(TokenName, {
        title: title
      })), React.createElement(Td, null, flattenedColorTokens[title]));
    })));
  },
  name: 'Design Tokens a11y Colors'
};
export var DesignTokensDarkColors = function DesignTokensDarkColors() {
  var _Object$keys4;
  var _createTheme3 = createTheme({
      tokensTheme: 'dark'
    }),
    colorTokens = _createTheme3.colorTokens;
  var flattenedColorTokens = flattenObject(colorTokens);
  return React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, React.createElement(Box, {
    ml: 5
  }, "Color")), React.createElement(Th, null, "Token name"), React.createElement(Th, null, "Value"))), React.createElement(Tbody, null, (_Object$keys4 = Object.keys(flattenedColorTokens)) === null || _Object$keys4 === void 0 ? void 0 : _Object$keys4.map(function (title) {
    return React.createElement(Tr, {
      key: title
    }, React.createElement(Td, null, React.createElement(TokenColor, {
      $color: flattenedColorTokens[title]
    })), React.createElement(Td, null, React.createElement(TokenName, {
      title: title
    })), React.createElement(Td, null, flattenedColorTokens[title]));
  })));
};
export var LightColors = function LightColors() {
  var _Object$keys5;
  var a11yTheme = createTheme({
    a11yColors: true
  });
  return React.createElement(React.Fragment, null, React.createElement(Box, {
    py: 4
  }, React.createElement(Typography, {
    type: "title1",
    as: "h1"
  }, "Light Colors"), React.createElement(Typography, {
    type: "primary"
  }, "Do not use this unless you have very specific needs for this. For example when you do not want the color to change on dark mode. For instance text on background image. ", React.createElement("br", null), "Use like ", React.createElement("pre", null, "theme.lightColor.text"))), React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, "Name"), React.createElement(Th, null, "Default"), React.createElement(Th, null, "A11y"))), React.createElement(Tbody, null, (_Object$keys5 = Object.keys(theme.lightColor)) === null || _Object$keys5 === void 0 ? void 0 : _Object$keys5.map(function (title) {
    return React.createElement(Tr, {
      key: "theme-".concat(title)
    }, React.createElement(Td, null, title), React.createElement(Td, null, colorWithValue(theme.lightColor[title])), React.createElement(Td, null, colorWithValue(a11yTheme.lightColor[title])));
  }))));
};
export var DarkColors = function DarkColors() {
  var _Object$keys6;
  var a11yTheme = createTheme({
    a11yColors: true
  });
  return React.createElement(React.Fragment, null, React.createElement(Box, {
    py: 4
  }, React.createElement(Typography, {
    type: "title1",
    as: "h1"
  }, "Dark Colors"), React.createElement(Typography, {
    type: "primary"
  }, "Do not use this unless you have very specific needs for this. For example when you do not want the color to change on light mode. For instance text on background image. ", React.createElement("br", null), "Use like ", React.createElement("pre", null, "theme.darkColor.text"))), React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, "Name"), React.createElement(Th, null, "Default"), React.createElement(Th, null, "A11y"))), React.createElement(Tbody, null, (_Object$keys6 = Object.keys(theme.darkColor)) === null || _Object$keys6 === void 0 ? void 0 : _Object$keys6.map(function (title) {
    return React.createElement(Tr, {
      key: "theme-".concat(title)
    }, React.createElement(Td, null, title), React.createElement(Td, null, colorWithValue(theme.darkColor[title])), React.createElement(Td, null, colorWithValue(a11yTheme.darkColor[title])));
  }))));
};
export var ColorsPalette = {
  render: function render() {
    var _Object$keys7;
    return React.createElement(React.Fragment, null, React.createElement("h1", null, "\u26A0\uFE0F Internal object, use colors (semantic)"), "(", React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, "Name"), React.createElement(Th, null, "Default"), React.createElement(Th, null, "A11y"), React.createElement(Th, null, "Dark"))), React.createElement(Tbody, null, (_Object$keys7 = Object.keys(defaultColors)) === null || _Object$keys7 === void 0 || (_Object$keys7 = _Object$keys7.filter(function (title) {
      return title !== 'palettes';
    })) === null || _Object$keys7 === void 0 ? void 0 : _Object$keys7.map(function (title) {
      return React.createElement(Tr, {
        key: "theme-".concat(title)
      }, React.createElement(Td, null, title), React.createElement(Td, null, colorWithValue(defaultColors[title])), React.createElement(Td, null, colorWithValue(accessabilityColors[title])));
    }))), ");");
  },
  name: 'Colors (palette)'
};
export var ScreenSizes = {
  render: function render() {
    var _Object$entries;
    return React.createElement(Table, null, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, "Name"), React.createElement(Th, null, "Size"), React.createElement(Th, null, "Offset"))), React.createElement(Tbody, null, (_Object$entries = Object.entries(theme.breakpoints)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
        title = _ref3[0],
        breakpoint = _ref3[1];
      return React.createElement(Tr, {
        key: "breakpoints-".concat(title)
      }, React.createElement(Td, null, title), React.createElement(Td, null, React.createElement("pre", null, _propOr('', 'size', breakpoint))), React.createElement(Td, null, React.createElement("pre", null, _propOr(0, 'offset', breakpoint), " units")));
    })));
  },
  name: 'Screen sizes'
};