import styled from "@emotion/styled";
import * as React from "react";
import {
  DARK_PRIMARY_ONE,
  DARK_PRIMARY_TWO,
  LIGHT_SECONDARY_THREE,
  LIGHT_SECONDARY_TWO,
  LIGHT_TERTIARY_ONE,
} from "../../../shared/colors";

type Shortcut = {
  keys: string;
  callback: () => any;
};

type Props = {
  border?: boolean;
  forwardRef?: React.Ref<HTMLInputElement>;
} & React.InputHTMLAttributes<HTMLInputElement>;

type State = {};

class StyledInput extends React.Component<Props, State> {
  render() {
    const { border, forwardRef } = this.props;

    return <Input border={border} ref={forwardRef} {...this.props}></Input>;
  }
}

export default StyledInput;

const Input = styled.input<any>`
  -webkit-appearance: none;
  border: 1px solid ${DARK_PRIMARY_TWO};
  background-image: none;
  background-color: ${DARK_PRIMARY_ONE};
  border-radius: 4px;
  color: ${LIGHT_SECONDARY_THREE};
  border: ${(props) =>
    props.border ? `1px solid ${LIGHT_TERTIARY_ONE}` : "none"};
  :focus {
    border: 1px solid ${LIGHT_TERTIARY_ONE};
    outline: none;
  }
  ::placeholder {
    color: ${LIGHT_SECONDARY_TWO};
  }
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  font-size: 14px;
`;