import styled from 'styled-components';
import * as React from 'react';
import { Sizes, Colors, Variants } from '../../styles';

const sizes = {
    xxs: {
        height: '10px',
        fontSize: '8px',
    },
    xs: {
        height: '15px',
        fontSize: '10px',
    },
    sm: {
        height: '20px',
        fontSize: '12px',
    },
    md: {
        height: '30px',
        fontSize: '14px',
    },
    lg: {
        height: '40px',
        fontSize: '16px',
    },
    xl: {
        height: '50px',
        fontSize: '18px',
    },
    xxl: {
        height: '60px',
        fontSize: '20px',
    },
};

interface Props {
    inputSize: Sizes;
    name: string;
    onChange: (e: { target: { value: string} }) => void;
    error?: string;
    variant: Variants;
    color: Colors;
}

interface ContainerProps {
    fullWidth?: boolean;
}

interface LabelProps {
    error?: string;
}

const StyledTextInput = styled.input<Props>` 
    height: ${props => sizes[props.inputSize].height};
    font-size: ${props => sizes[props.inputSize].fontSize};
    border: 1px solid ${props => props.theme.colorPalette[props.color]?.main};
    background: transparent;
    ${props => props.error && `
        color: red;
        border: 1px solid red;
    `}
    border-radius: 3px;
    outline: 0;
    ${ props => props.variant === 'transparent' && `
        border: none;
    `}
`;

const StyledLabel = styled.label<LabelProps>` 
    ${props => props.error && 'color: red'};
`;

const StyledInputContainer = styled.div<ContainerProps>`
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    width: 25ch;

    ${props => props.fullWidth && `
        width: 100%;
    `}
`;

const StyledInputError = styled.div`
    color: red;
    font-size: 12px;
`;

export { StyledTextInput, StyledLabel, StyledInputContainer, StyledInputError};