import { Colors, Variants } from '../../styles';
import { Icon } from '../../surface';
import * as React from 'react';
import { StyledLabel, StyledUploadButton, Image } from './styled-upload-button';

interface Props {
    accept: string;
    label?: React.ReactNode;
    name: string;
    onChange: () => void;
    style?: React.CSSProperties;
    multiple?: boolean;
    type: 'button' | 'circle-image' | 'square-image';
    src?: string;
    alignCenter?: boolean;
    variant: Variants;
    color: Colors;
}

const UploadButton = (props: Props) => {
    const hasImage = props.type !== 'button';
    const alignCenter = {
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent:'center',
    };
    return(
        <div
            style={props.alignCenter ? { ...alignCenter, ...props.style } : props.style}
        >
            <StyledLabel
                type={props.type}
                htmlFor={props.name}
                hasImage={hasImage}
                variant={props.variant}
                color={props.color}
            >
                {hasImage &&
                    <Image
                        type={props.type}
                        src={props.src}
                    />
                }
                {props.type === 'square-image' &&
                    <Icon
                        name='camera'
                        style={{color: '#000', fontSize: 20}}
                    />
                }
                {!(hasImage && props.src) &&
                    <span> {props.label}</span>
                }
            </StyledLabel>
            <StyledUploadButton
                id={props.name}
                name={props.name}
                type='file'
                accept={props.accept}
                onChange={props.onChange}
                multiple={props.multiple}
                size={60}
            />

        </div>
    );

};

UploadButton.defaultProps = {
    type: 'button',
    variant: 'outlined',
    color: 'primary',
    accept: '*',
    onChange: (e: any) => {},
};

export default UploadButton;