import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React from "react";
import classnames from "classnames";
import isThemePalette from "../../utils/isThemePalette";
import useTheme from "../../hooks/useTheme";
import contrast from "../../utils/contrast";
import brightness from "../../utils/brightness";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Switch = props => {
  const theme = useTheme();
  const {
    wrapperProps,
    checked,
    icon,
    iconColor = null,
    color = "primary",
    size = "medium",
    shape = "round",
    className = null,
    ...otherProps
  } = props;

  function handleShadowColor() {
    return "#0000003D";
  }

  function handleBackgroundColor() {
    return theme.palette.shade; // return isThemePalette(color) ? theme.palette[color][500] : color;
  }

  function handleBackgroundColorActive() {
    return isThemePalette(color) ? theme.palette[color][500] : color;
  }

  function handleDotColor() {
    return isThemePalette(color) ? theme.palette[color][700] : brightness(color, -20);
  }

  function handleDotColorClick() {
    return isThemePalette(color) ? theme.palette[color][300] : brightness(color, 10);
  }

  function handleTextColor() {
    if (iconColor) return `${iconColor}`; // if value is defined by props

    return contrast(isThemePalette(color) ? theme.palette[color][700] : brightness(color, -20));
  }

  function handleWidth() {
    switch (size) {
      case "xlarge":
        return `${5}em`;

      case "large":
        return `${4}em`;

      case "small":
        return `${2.2}em`;

      case "mini":
        return `${1.8}em`;

      case "medium":
      default:
        return `${3}em`;
    }
  }

  function handleHeight() {
    switch (size) {
      case "xlarge":
        return `${5 / 2}em`;

      case "large":
        return `${4 / 2}em`;

      case "small":
        return `${2.2 / 2}em`;

      case "mini":
        return `${1.8 / 2}em`;

      case "medium":
      default:
        return `${3 / 2}em`;
    }
  }

  function handleInternalSize() {
    switch (size) {
      case "xlarge":
        return `${1.35}em`;

      case "large":
        return `${1.28}em`;

      case "small":
        return `${1}em`;

      case "mini":
        return `${1.15}em`;

      case "medium":
      default:
        return `${1.15}em`;
    }
  }

  function handleInternalMargin() {
    switch (size) {
      case "xlarge":
        return `${4}px`;

      case "large":
        return `${4}px`;

      case "small":
        return `${3}px`;

      case "mini":
        return `${3}px`;

      case "medium":
      default:
        return `${3}px`;
    }
  }

  function handleIconSize() {
    switch (size) {
      case "xlarge":
        return `${1.5}em`;

      case "large":
        return `${1.2}em`;

      case "small":
        return `${0.75}em`;

      case "mini":
        return `${0.5}em`;

      case "medium":
      default:
        return `${1}em`;
    }
  }

  function handleShape() {
    switch (shape) {
      case "round":
        return "border-radius: 10em;";

      case "rounded":
        return "border-radius: 0.3em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  return /*#__PURE__*/_jsxs("div", { ...wrapperProps,
    className: _JSXStyle.dynamic([["1657138901", [handleWidth(), handleHeight(), handleBackgroundColor(), handleShape(), handleInternalMargin(), handleInternalMargin(), handleInternalSize(), handleInternalSize(), handleDotColor(), handleShape(), handleTextColor(), handleShadowColor(), handleIconSize(), handleBackgroundColorActive(), handleInternalMargin(), handleDotColorClick()]]]) + " " + (wrapperProps && wrapperProps.className != null && wrapperProps.className || "Wps-SwitchWrapper"),
    children: [/*#__PURE__*/_jsx("input", {
      type: "checkbox",
      "data-testid": "Wps-Switch",
      checked: checked,
      className: _JSXStyle.dynamic([["1657138901", [handleWidth(), handleHeight(), handleBackgroundColor(), handleShape(), handleInternalMargin(), handleInternalMargin(), handleInternalSize(), handleInternalSize(), handleDotColor(), handleShape(), handleTextColor(), handleShadowColor(), handleIconSize(), handleBackgroundColorActive(), handleInternalMargin(), handleDotColorClick()]]]) + " " + (classnames("Wps-Switch") || "")
    }), /*#__PURE__*/_jsx("div", { ...otherProps,
      className: _JSXStyle.dynamic([["1657138901", [handleWidth(), handleHeight(), handleBackgroundColor(), handleShape(), handleInternalMargin(), handleInternalMargin(), handleInternalSize(), handleInternalSize(), handleDotColor(), handleShape(), handleTextColor(), handleShadowColor(), handleIconSize(), handleBackgroundColorActive(), handleInternalMargin(), handleDotColorClick()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-SwExternal", className) || ""),
      children: /*#__PURE__*/_jsx("div", {
        className: _JSXStyle.dynamic([["1657138901", [handleWidth(), handleHeight(), handleBackgroundColor(), handleShape(), handleInternalMargin(), handleInternalMargin(), handleInternalSize(), handleInternalSize(), handleDotColor(), handleShape(), handleTextColor(), handleShadowColor(), handleIconSize(), handleBackgroundColorActive(), handleInternalMargin(), handleDotColorClick()]]]) + " " + "Wps-SwInternal",
        children: icon && icon
      })
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "1657138901",
      dynamic: [handleWidth(), handleHeight(), handleBackgroundColor(), handleShape(), handleInternalMargin(), handleInternalMargin(), handleInternalSize(), handleInternalSize(), handleDotColor(), handleShape(), handleTextColor(), handleShadowColor(), handleIconSize(), handleBackgroundColorActive(), handleInternalMargin(), handleDotColorClick()],
      children: `.Wps-SwitchWrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Wps-SwitchWrapper.__jsx-style-dynamic-selector input[type="checkbox"].__jsx-style-dynamic-selector{height:0;width:0;visibility:hidden;}.Wps-SwitchWrapper.__jsx-style-dynamic-selector .Wps-SwExternal.__jsx-style-dynamic-selector{cursor:pointer;width:${handleWidth()};height:${handleHeight()};background:${handleBackgroundColor()};display:block;${handleShape()};position:relative;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.Wps-SwitchWrapper.__jsx-style-dynamic-selector .Wps-SwExternal.__jsx-style-dynamic-selector .Wps-SwInternal.__jsx-style-dynamic-selector{position:absolute;top:${handleInternalMargin()};left:${handleInternalMargin()};width:${handleInternalSize()};height:${handleInternalSize()};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:${handleDotColor()};${handleShape()};-webkit-transition:all 0.3s ease;transition:all 0.3s ease;font-size:100%;color:${handleTextColor()};box-shadow:0px 0px 5px ${handleShadowColor()};}.Wps-SwitchWrapper.__jsx-style-dynamic-selector .Wps-SwExternal.__jsx-style-dynamic-selector .Wps-SwInternal.__jsx-style-dynamic-selector{font-size:${handleIconSize()};}.Wps-SwitchWrapper.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector:checked+.Wps-SwExternal.__jsx-style-dynamic-selector{background:${handleBackgroundColorActive()};}.Wps-SwitchWrapper.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector:checked+.Wps-SwExternal.__jsx-style-dynamic-selector .Wps-SwInternal.__jsx-style-dynamic-selector{left:calc(100% - ${handleInternalMargin()});-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}.Wps-SwitchWrapper.__jsx-style-dynamic-selector .Wps-SwExternal.__jsx-style-dynamic-selector:active .Wps-SwInternal.__jsx-style-dynamic-selector{background:${handleDotColorClick()};}`
    })]
  });
};