/* eslint-disable react/prop-types */
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { usePlatform } from '../../../utils/platform';
import { UploaderH5 } from './uploaderH5';
import classNames from '../../../utils/classnames';
import { UploaderPCInner, CLASS_PREFIX } from './uploaderPc';
import FormCell from '../formcell';

import './index.css';

/**
 * 图片组件上传，区分 h5端/pc端
 */

function UploaderPc(props) {
  const {
    layout,
    className,
    id,
    style,
    labelVisible = true,
    title = '上传图片',
    requiredFlag = false,
    ...restProps
  } = props;
  const cls = classNames({
    'weda-ui': true,
    [className]: className,
    cloudbase_standard: true,
  });

  return (
    <FormCell
      id={id}
      className={cls}
      style={style}
      label={labelVisible ? title : null}
      layout={layout}
      multiCell={false}
      requiredFlag={requiredFlag}
    >
      <UploaderPCInner
        {...restProps}
        style={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
        }}
      />
    </FormCell>
  );
}
export default function Uploader(props) {
  const platform = usePlatform();
  if (props?.showType === 'pc') {
    return <UploaderPc {...props} />;
  }
  if (props?.showType === 'h5') {
    return <UploaderH5 {...props} />;
  }
  return platform === 'h5' ? (
    <UploaderH5 {...props} />
  ) : (
    <UploaderPc {...props} />
  );
}
