import React, { useContext, useMemo } from 'react';
import cls from 'clsx';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

var CalenderDay = function CalenderDay(props) {
  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('calendar', prefixCls),
      bem = _createNamespace[0];

  var style = useMemo(function () {
    var item = props.item,
        index = props.index,
        color = props.color,
        offset = props.offset,
        rowHeight = props.rowHeight;
    var iternalStyle = {
      height: rowHeight
    };

    if (item.type === 'placeholder') {
      iternalStyle.width = '100%';
      return iternalStyle;
    }

    if (index === 0) {
      iternalStyle.marginLeft = 100 * offset / 7 + "%";
    }

    if (color) {
      switch (item.type) {
        case 'end':
        case 'start':
        case 'start-end':
        case 'multiple-middle':
        case 'multiple-selected':
          iternalStyle.background = color;
          break;

        case 'middle':
          iternalStyle.color = color;
          break;

        default:
          break;
      }
    }

    return iternalStyle;
  }, [props.item, props.index, props.color, props.offset, props.rowHeight]);

  var onClick = function onClick() {
    if (props.item.type !== 'disabled') {
      props.onClick == null ? void 0 : props.onClick(props.item);
    }
  };

  var renderTopInfo = function renderTopInfo() {
    var topInfo = props.item.topInfo;

    if (topInfo || props.topInfoRender) {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(bem('top-info'))
      }, props.topInfoRender ? props.topInfoRender(props.item) : topInfo);
    }

    return null;
  };

  var renderBottomInfo = function renderBottomInfo() {
    var bottomInfo = props.item.bottomInfo;

    if (bottomInfo || props.bottomInfoRender) {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(bem('bottom-info'))
      }, props.bottomInfoRender ? props.bottomInfoRender(props.item) : bottomInfo);
    }

    return null;
  };

  var renderContent = function renderContent() {
    var item = props.item,
        color = props.color,
        rowHeight = props.rowHeight;
    var type = item.type,
        text = item.text;
    var Nodes = /*#__PURE__*/React.createElement(React.Fragment, null, renderTopInfo(), text, renderBottomInfo());

    if (type === 'selected') {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(bem('selected-day')),
        style: {
          width: rowHeight,
          height: rowHeight,
          background: color
        }
      }, Nodes);
    }

    return Nodes;
  };

  var _props$item = props.item,
      type = _props$item.type,
      className = _props$item.className;

  if (type === 'placeholder') {
    return /*#__PURE__*/React.createElement("div", {
      className: cls(bem('day')),
      style: style
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    role: "gridcell",
    style: style,
    className: cls(bem('day', type), className),
    tabIndex: type === 'disabled' ? undefined : -1,
    onClick: onClick
  }, renderContent());
};

CalenderDay.defaultProps = {
  offset: 0
};
export default CalenderDay;