import React from "react";

import Button from "../button/Button";
import Box from "../layout/Box";
import style from "./UploadButton.module.css";
import uploadButtonPropTypes, {
  defaultProps,
  propsDescription
} from "./UploadButton.propTypes";
import getCompliedCustomId from "../../utils/getCompliedCustomId";

export default function UploadButtonSkeleton(props) {
  let {
    onChange,
    multiple,
    eleRef,
    variant,
    size,
    shape,
    text,
    startIcon,
    endIcon,
    disabled,
    color,
    onClick,
    accept,
    customId
  } = props;

  return (
    <Box
      className={style.base}
      tagAttributeProps={{
        "data-id": getCompliedCustomId(props, customId.uploadButton)
      }}
    >
      <Button
        onClick={onClick}
        text={text}
        variant={variant}
        size={size}
        shape={shape}
        startIcon={startIcon}
        endIcon={endIcon}
        disabled={disabled}
        color={color}
      />
      <input
        type="file"
        className={style.uploadLink}
        ref={eleRef}
        onChange={onChange}
        multiple={multiple}
        accept={accept}
      ></input>
    </Box>
  );
}

UploadButtonSkeleton.propTypes = uploadButtonPropTypes;
UploadButtonSkeleton.defaultProps = defaultProps;
UploadButtonSkeleton.propsDescription = propsDescription;
