import styled, { css } from 'styled-components';
import { Box, Flexbox, Typography } from '../../..';
import { Select } from '../Select';
import NormalizedElements from '../../../common/NormalizedElements';
var hasError = function hasError(error) {
  return error && error !== '';
};
var background = css(["background-color:", ";"], function (p) {
  return p.disabled && p.variant !== 'quiet' ? p.theme.color.disabledBackground : p.theme.color.inputBackground;
});
var hoverBorderStyles = css(["", ""], function (p) {
  return p.disabled ? '' : "\n      &:hover {\n        border-color: ".concat(p.theme.color.inputBorderHover, ";\n      }\n");
});
var borderStyles = css(["border:solid;border-color:", ";border-width:", ";&:focus{border-width:1px;}position:relative;", " ", ""], function (p) {
  if (hasError(p.error)) return p.theme.color.inputBorderError;
  if (p.success) return p.theme.color.inputBorderSuccess;
  return p.theme.color.inputBorder;
}, function (p) {
  return p.variant === 'quiet' ? '0 0 2px 0' : '1px';
}, hoverBorderStyles, function (p) {
  return p.disabled && p.variant === 'quiet' ? "border-color: ".concat(p.theme.color.disabledBackground, ";") : '';
});
export var placeholderNormalization = css(["&::placeholder{color:", ";line-height:inherit;opacity:1;}", ";&:disabled::placeholder{color:", ";}"], function (p) {
  return p.variant === 'quiet' ? p.theme.color.cta : p.theme.color.label;
}, function (p) {
  return p.variant === 'quiet' ? "&:focus::placeholder { color: ".concat(p.theme.color.disabledText, "}") : '';
}, function (p) {
  return p.theme.color.disabledText;
});
export var StyledSelect = Select ? styled(Select).withConfig({
  displayName: "Phonestyled__StyledSelect",
  componentId: "sc-1o1oim0-0"
})(["max-width:50px;& *{border:none;}"]) : Select;
export var StyledCountryCode = styled(Flexbox).withConfig({
  displayName: "Phonestyled__StyledCountryCode",
  componentId: "sc-1o1oim0-1"
})(["cursor:", ";background-color:", ";"], function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? 'not-allowed' : 'auto';
}, function (_ref2) {
  var theme = _ref2.theme,
    disabled = _ref2.disabled;
  return disabled ? theme.color.disabledBackground : theme.color.card;
});
export var StyledInput = styled(NormalizedElements.Input).attrs(function (p) {
  return {
    type: p.type || 'text'
  };
}).withConfig({
  displayName: "Phonestyled__StyledInput",
  componentId: "sc-1o1oim0-2"
})(["border:0;outline:none;color:", ";width:100%;height:100%;padding:0 ", "px;margin:0;box-sizing:border-box;line-height:inherit;", " ", " ", " ", " ", ""], function (_ref3) {
  var theme = _ref3.theme;
  return theme.color.text;
}, function (p) {
  return p.theme.spacing.unit(p.variant === 'quiet' ? 0 : 2);
}, background, placeholderNormalization, function (p) {
  return p.variant === 'quiet' ? "color: ".concat(p.theme.color.cta, "; \n         &:disabled {\n           color: ").concat(p.theme.color.disabledText, ";\n         }\n         font-size: 28px; \n         font-weight: bold;\n         &:focus {\n           padding-left: ").concat(p.theme.spacing.unit(2), "px;\n           padding-right: ").concat(p.theme.spacing.unit(0), "px;\n         }") : '';
}, function (p) {
  return p.type === 'search' && " \n    &[type=\"search\"] {\n      -webkit-appearance: textfield;\n    }\n    ";
}, function (p) {
  return p.disabled && "\n      cursor: not-allowed;\n      ";
});
export var StyledWrapper = styled(Flexbox).withConfig({
  displayName: "Phonestyled__StyledWrapper",
  componentId: "sc-1o1oim0-3"
})(["position:relative;height:", "px;padding:", "px 0;background:", ";border-radius:", ";", " ", ""], function (p) {
  return p.size === 's' ? p.theme.spacing.unit(8) : p.theme.spacing.unit(10);
}, function (p) {
  return p.theme.spacing.unit(p.variant === 'quiet' ? 1 : 0);
}, function (p) {
  return p.disabled ? p.theme.color.disabledBackground : p.theme.color.card;
}, function (p) {
  return p.theme.borderRadius4;
}, borderStyles, function (_ref4) {
  var focused = _ref4.focused,
    theme = _ref4.theme;
  return focused ? "border-color: ".concat(theme.color.borderActive, ";") : '';
});
export var StyledBox = styled(Box).withConfig({
  displayName: "Phonestyled__StyledBox",
  componentId: "sc-1o1oim0-4"
})(["cursor:pointer;background:", ";", ""], function (p) {
  return p.focused ? p.theme.color.background : p.theme.color.card;
}, function (p) {
  return !p.isKeyboardNavigation ? "\n&: hover {\n  background: ".concat(p.theme.color.background, ";\n  }\n") : '';
});
export var StyledTypography = styled(Typography).withConfig({
  displayName: "Phonestyled__StyledTypography",
  componentId: "sc-1o1oim0-5"
})(["width:inherit;"]);