import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useContext } from 'react';
import clsx from 'clsx';
import { Arrow, ArrowDown, ArrowLeft, ArrowUp } from '@react-vant/icons';
import { isDef } from '../utils';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const Cell = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('cell', prefixCls);

  const renderLabel = () => {
    const showLabel = isDef(props.label);

    if (showLabel) {
      return _jsx("div", Object.assign({
        className: clsx(bem('label'), props.labelClass)
      }, {
        children: props.label
      }));
    }

    return null;
  };

  const renderTitle = () => {
    if (isDef(props.title)) {
      return _jsxs("div", Object.assign({
        className: clsx(bem('title'), props.titleClass),
        style: props.titleStyle
      }, {
        children: [props.title, renderLabel()]
      }));
    }

    return null;
  };

  const renderValue = () => {
    const hasTitle = isDef(props.title);
    const hasValue = props.children || isDef(props.value);

    if (hasValue) {
      return _jsx("div", Object.assign({
        className: clsx(bem('value', {
          alone: !hasTitle
        }), props.valueClass)
      }, {
        children: props.children ? props.children : _jsx("span", {
          children: props.value
        })
      }));
    }

    return null;
  };

  const renderLeftIcon = () => {
    if (props.icon) {
      return React.cloneElement(props.icon, {
        className: clsx(bem('left-icon'))
      });
    }

    return null;
  };

  const renderRightIcon = () => {
    if (props.rightIcon) {
      return props.rightIcon;
    }

    if (props.isLink) {
      const className = clsx(bem('right-icon'));
      if (props.arrowDirection === 'left') return _jsx(ArrowLeft, {
        className: className
      });
      if (props.arrowDirection === 'up') return _jsx(ArrowUp, {
        className: className
      });
      if (props.arrowDirection === 'down') return _jsx(ArrowDown, {
        className: className
      });
      return _jsx(Arrow, {
        className: className
      });
    }

    return null;
  };

  const {
    className,
    style,
    size,
    center,
    border = true,
    isLink,
    required,
    onClick
  } = props;
  const clickable = isLink || props.clickable;
  const classes = {
    center,
    required,
    clickable,
    borderless: !border
  };

  if (size) {
    classes[size] = !!size;
  }

  return _jsxs("div", Object.assign({
    style: style,
    className: clsx(bem(classes), className),
    role: clickable ? 'button' : undefined,
    onClick: onClick
  }, {
    children: [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), props.extra]
  }));
};

export default Cell;