import styled from "styled-components";
import Icon from "@src/components/UI/Icon";

const FileV2InputWrapperStyle = props => ({
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '24px 6px',
    textAlign: 'center',
    backgroundColor: '#CFE5FF1A',
    border: `${props.theme.borderWidths.xs}px dashed ${props.theme.colors.blue.haptik}`,
    borderRadius: props.theme.radii.lg,
});

const FileV2InputWrapper = styled("div")(
    FileV2InputWrapperStyle
);

const IconWrapperStyle = props => ({
    marginBottom: props.theme.space.sm,
});

const IconWrapper = styled("div")(
    IconWrapperStyle
);

const HiddenFileInputStyle = () => ({
    position: 'absolute',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    opacity: '0',
    cursor: 'pointer',
});

const HiddenFileInput = styled("input")(
    HiddenFileInputStyle
);

const UploadInfoWrapperStyle = props => ({
    position: 'relative',
    width: '75%',
    alignSelf: 'flex-start',
    paddingLeft: props.theme.space.md*2,
});

const UploadInfoWrapper = styled("div")(
    UploadInfoWrapperStyle
);

const ProgressBarWrapperStyle = props => ({
    position: 'relative',
    width: '100%',
    height: '5px',
    backgroundColor: '#CFE5FF',
    borderRadius: '10px',
    overflow: 'hidden',
    marginTop: props.theme.space.sm,
});

const ProgressBarWrapper = styled("div")(
    ProgressBarWrapperStyle
);

const ProgressBarStyle = props => ({
    position: 'absolute',
    top: 0,
    left: 0,
    height: '5px',
    backgroundColor: props.theme.colors.blue.haptik,
    borderRadius: '10px',
});

const ProgressBar = styled("div")(
    ProgressBarStyle
);

const CancelIconStyle = () => ({
    position: 'absolute',
    bottom: '-3px',
    right: '-30px',
});

const CancelIcon = styled(Icon)(
    CancelIconStyle
)

export { FileV2InputWrapper, IconWrapper, HiddenFileInput, UploadInfoWrapper, ProgressBarWrapper, ProgressBar, CancelIcon };