// =============================================================================
// Import
// =============================================================================

// React
import React from 'react';
import PropTypes from 'prop-types';

// Styles
import styled from 'styled-components';
import { color, border } from '../../utils/styles';
import InputWrapper from './InputWrapper';

// =============================================================================
// Styles
// =============================================================================

const Input = styled.input`
  -webkit-appearance: none;
  outline: none;
  color: inherit;
  background-color: transparent;
  display: block;
  width: 100%;
  border: 1px solid ${color.grey.lighter};
  caret-color: ${color.brand.primary};
  border-radius: ${border.radius.small};
  &::placeholder {
    opacity: 0.5;
  }
  display: ${props => (props.isInline ? 'inline-block' : 'block')};
  padding: ${props => props.padding};
  font-size: ${props => props.fontSize};
  font-family: ${props => props.fontFamily};
`;

Input.displayName = 'Input';
Input.propTypes = {
  padding: PropTypes.string.isRequired,
};
Input.defaultProps = {
  fontSize:   'inherit',
  fontFamily: 'inherit',
};

// =============================================================================
// Component
// =============================================================================

export default function TextInput({
  type,
  name,
  value,
  placeholder,
  label,
  description,
  marginBottom,
  padding,
  fontSize,
  fontFamily,
  onChange,
}) {
  return (
    <InputWrapper
      name={name}
      label={label}
      description={description}
      marginBottom={marginBottom}
    >
      <Input
        type={type}
        name={name}
        id={name}
        value={value}
        placeholder={placeholder}
        padding={padding}
        fontSize={fontSize}
        fontFamily={fontFamily}
        onChange={e =>
          onChange(
            name,
            type === 'number' ? parseInt(e.target.value, 10) : e.target.value,
          )}
      />
    </InputWrapper>
  );
}

TextInput.propTypes = {
  type:         PropTypes.string.isRequired,
  name:         PropTypes.string.isRequired,
  onChange:     PropTypes.func.isRequired,
  value:        PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  placeholder:  PropTypes.string,
  label:        PropTypes.string,
  description:  PropTypes.string,
  marginBottom: PropTypes.string,
  padding:      PropTypes.string,
  fontSize:     PropTypes.string,
  fontFamily:   PropTypes.string,
};

TextInput.defaultProps = {
  placeholder:  null,
  label:        null,
  description:  null,
  marginBottom: null,
  padding:      '2rem',
  fontSize:     null,
  fontFamily:   'inherit',
};

@@ -558,16 +558,25 @@
 ======%0A%0A
+// Input%0A
 const In
@@ -640,16 +640,35 @@
 : none;%0A
+  border: initial;%0A
   color:
@@ -716,159 +716,53 @@
 ;%0A  
-display: block;%0A  width: 100%25;%0A  border: 1px solid $%7Bcolor.grey.lighter%7D;%0A  caret-color: $%7Bcolor.brand.primary%7D;%0A  border-radius: $%7Bborder.radius.small
+flex: 1;%0A  caret-color: $%7Bcolor.brand.primary
 %7D;%0A 
@@ -1166,16 +1166,423 @@
 t',%0A%7D;%0A%0A
+// InputFlex%0Aconst InputFlex = styled.div%60%0A  display: flex;%0A  border: 1px solid $%7Bcolor.grey.lighter%7D;%0A  border-radius: $%7Bborder.radius.small%7D;%0A%60; // TODO find a better name%0A%0A// InputButton%0Aconst InputButton = styled.button%60%0A  border: none;%0A  outline: none;%0A  font-family: inherit;%0A  display: flex;%0A  align-items: center;%0A  padding: 0 1rem;%0A  cursor: pointer;%0A  background-color: $%7Bcolor.grey.lighter%7D;%0A%60;%0A%0A
 // =====
@@ -1914,16 +1914,26 @@
 Change,%0A
+  onCopy,%0A
 %7D) %7B%0A  r
@@ -2080,17 +2080,39 @@
   %3CInput
+Flex%3E
 %0A
+        %3CInput%0A  
         
@@ -2123,16 +2123,18 @@
 =%7Btype%7D%0A
+  
         
@@ -2153,16 +2153,18 @@
         
+ 
+ 
 id=%7Bname
@@ -2157,32 +2157,34 @@
       id=%7Bname%7D%0A
+  
         value=%7Bv
@@ -2197,16 +2197,18 @@
         
+ 
+ 
 placehol
@@ -2233,16 +2233,18 @@
         
+  
 padding=
@@ -2257,24 +2257,26 @@
 ng%7D%0A        
+ 
+ 
 fontSize=%7Bfo
@@ -2283,16 +2283,18 @@
 ntSize%7D%0A
+  
         
@@ -2317,16 +2317,18 @@
 Family%7D%0A
+  
         
@@ -2344,32 +2344,34 @@
 %7Be =%3E%0A          
+  
 onChange(%0A      
@@ -2364,16 +2364,18 @@
 Change(%0A
+  
         
@@ -2392,24 +2392,26 @@
             
+  
 type === 'nu
@@ -2475,16 +2475,18 @@
         
+  
 )%7D%0A     
@@ -2486,17 +2486,233 @@
 %7D%0A      
-/
+  /%3E%0A        %7BonCopy && (%0A          %3CInputButton onClick=%7B() =%3E onCopy()%7D%3E%0A            %3Cspan role=%22img%22 aria-label=%22clipboard%22%3E%0A              %F0%9F%93%8B%0A            %3C/span%3E%0A          %3C/InputButton%3E%0A        )%7D%0A      %3C/InputFlex
 %3E%0A    %3C/
@@ -3214,16 +3214,48 @@
 string,%0A
+  onCopy:       PropTypes.func,%0A
 %7D;%0A%0AText
@@ -3426,23 +3426,45 @@
 amily:   'inherit',%0A
+  onCopy:       null,%0A
 %7D;%0A

add input buttons