import styled from "styled-components";
import space from "@styled-system/space";
import color from "@styled-system/color";
import border from "@styled-system/border";
import variant from "@styled-system/variant";
import typography from "@styled-system/typography";

import Box from "@src/components/UI/Box";

const InputMode = variant({
  prop: "mode",
  scale: "textInputModes",
  variants: {
    disabled: {},
  },
});

const WrapperMode = variant({
  prop: "mode",
  scale: "textWrapperModes",
  variants: {
    label: {},
  },
});

const InputVariant = variant({
  prop: "variant",
  scale: "textInputVariants",
  variants: {
    dropdown: {},
  },
});

const InputSize = variant({
  prop: "size",
  scale: "textInputSize",
  variants: {
    small: {},
  },
});

// Non customizable CSS props
const inputStyle = props => {
  const { theme, multiline, hasPostfixComponent } = props;
  const { radii, borderWidths, colors, space } = theme;
  const paddingTopBottom = `${space.lg - space.xs}px`; // 10px
  const paddingRight = hasPostfixComponent
    ? `${3 * space.lg - space.xs}px`
    : `${space.sm}px`; // 8px
  const paddingLeft = `${space.sm}px`;

  // adds left padding when there's an icon, applies only if it's an input element
  const textInputStyle = !multiline
    ? {
        "&:not(:first-child)": {
          paddingLeft: 3 * space.lg - space.xs, // 38px
        },
      }
    : {};

  return {
    borderRadius: radii.sm,
    border: `${borderWidths.xs}px solid ${colors.grey.haptik}`,
    backgroundColor: colors.grey.pastel,
    boxSizing: "border-box",
    width: "100%",
    padding: `${paddingTopBottom} ${paddingRight} ${paddingTopBottom} ${paddingLeft}`,
    transition: "border 0.3s ease, color 0.3s ease",
    outline: "none",
    "&:focus": {
      border: `${borderWidths.xs}px solid ${colors.blue.haptik}`,
    },
    "&:hover": {
      border: `${borderWidths.xs}px solid ${colors.blue.haptik} !important`, // This is needed, for now.
    },
    resize: "none",
    overflowY: "hidden",
    color: colors.black.haptik,
    "&::-webkit-input-placeholder": {
      color: colors.grey.dark,
    },
    ...textInputStyle,
  };
};

const inputWrapperStyle = {
  position: "relative",
  outline: "none",
};

const ThemedTextInputWrapper = styled(Box)(
  inputWrapperStyle,
  space,
  color,
  border,
  typography,
  WrapperMode,
);

const ThemedTextInput = styled("input")(
  inputStyle,
  space,
  color,
  border,
  typography,
  InputMode,
  InputVariant,
  InputSize,
);

const ThemedTextarea = styled("textarea")(
  inputStyle,
  space,
  color,
  border,
  typography,
  InputMode,
  WrapperMode,
);

// Customizable CSS props
ThemedTextInputWrapper.defaultProps = {
  fontFamily: `"Proxima Nova", sans-serif`,
  mode: "default",
  variant: "default",
  padding: "zero",
};

ThemedTextInput.defaultProps = {
  fontFamily: `"Proxima Nova", sans-serif`,
  mode: "default",
  variant: "default",
  fontSize: "2",
};

ThemedTextarea.defaultProps = {
  fontFamily: `"Proxima Nova", sans-serif`,
  mode: "default",
  fontSize: "2",
};

export { ThemedTextInputWrapper, ThemedTextInput, ThemedTextarea, inputStyle };
