import * as React from 'react';
import { Colors, Sizes, Variants } from "../../styles";
import {
    StyledInputContainer,
    StyledDatetimeInput,
    StyledLabel,
    StyledInputError,
} from "./styled-datetime-input";

interface Props {
    label?: React.ReactNode;
    name: string;
    size: Sizes;
    variant: Variants;
    value: string | number;
    onChange: (e: { target: { value: string } }) => void;
    error?: string;
    color: Colors;
}

const DatetimeInput = (props: Props) => (
    <StyledInputContainer>
        {props.label && (
            <StyledLabel htmlFor={props.name} error={props.error}>
                {props.label}
            </StyledLabel>
        )}

        <StyledDatetimeInput
            color={props.color}
            inputSize={props.size}
            name={props.name}
            type="date"
            value={props.value}
            error={props.error}
            onChange={props.onChange}
        />

        <StyledInputError>{props.error}</StyledInputError>
    </StyledInputContainer>
);

DatetimeInput.defaultProps = {
    size: 'md',
    color: 'primary',
    variant: 'contained',
    onChange: () => {},
}

export default DatetimeInput;