import * as React from 'react';
import * as PropTypes from 'prop-types';

import classNames from '../../../utils/classnames';
import './index.css';
import { usePlatform } from '../../../utils/platform';
import { ConfigProvider, Form as TeaForm } from 'tea-component';

export default function FormCell({
  className,
  style,
  label,
  layout,
  children,
  multiCell,
  requiredFlag,
  size,
}) {
  const platform = usePlatform();
  const isFlex = layout !== 'vertical';

  if (platform === 'pc') {
    return (
      <ConfigProvider classPrefix="wedatea2td">
        <TeaForm.Item
          style={style}
          className={classNames({
            'weda-ui': true,
            'weui-cells_forms': !multiCell,
            'weui-cells_checkbox': multiCell,
            'weda-formcells__pc': !!label,
            'weda-formcells__full-width': size === 'full',
            [layout]: layout,
            [className]: [className],
          })}
          labelVisible={!!label}
          label={label}
        >
          {children}
        </TeaForm.Item>
      </ConfigProvider>
    );
  }
  return (
    <div className={className} style={style}>
      <div
        className={classNames({
          'weda-formcells': true,
          'weui-cells': true,
          'weui-cells_forms': !multiCell,
          'weui-cells_checkbox': multiCell,
          'weui-flex': isFlex,
        })}
      >
        {label ? (
          <div
            className={classNames({
              'weda-formcells__label': true,
              // 标题也采用使用weui-cell的样式
              'weui-cell': true,
            })}
          >
            {requiredFlag ? (
              <label className="weda-formcells__flag">*</label>
            ) : null}
            <label>{label}</label>
          </div>
        ) : null}
        <div
          className={classNames({
            'weda-formcells__content': true,
            'weui-flex__item': isFlex,
          })}
        >
          {children}
        </div>
      </div>
    </div>
  );
}
