import { Colors, Variants } from '../../styles';
import * as React from 'react';
import {
    StyledContainer,
    StyledLabel,
    StyledTextArea,
} from './styled-text-area';

interface Props {
    label?: React.ReactNode;
    name: string;
    value?: string;
    onChange: (e: { target: { value: string } }) => void;
    fullWidth?: boolean;
    placeholder?: string;
    color: Colors;
    variant: Variants;
    style?: React.CSSProperties;
    rows?: number;
    onSelect: (e: any) => void;
}

const TextArea = (props: Props) => (
    <StyledContainer
        fullWidth={props.fullWidth}
        style={props.style}
    >
        <StyledLabel
            htmlFor={props.name}
        >
            {props.label}
        </StyledLabel>
        <StyledTextArea
            id={props.name}
            name={props.name}
            onChange={props.onChange}
            onSelect={props.onSelect}
            value={props.value}
            color={props.color}
            variant={props.variant}
            placeholder={props.placeholder}
            rows={props.rows}
        />
    </StyledContainer>
);

TextArea.defaultProps = {
    variant: 'outlined',
    color: 'primary',
    onSelect: () => {},
    onChange: (e: any) => {},
};

export default TextArea;