import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import CardTitle from './Card.Title';
import CardSubTitle from './Card.SubTitle';
import CardAction from './Card.Action';

import Icon from './Icon';

import '../base';
import styles from './Card.styl';
import Spaced from './Spaced';

Card.Title = CardTitle;
Card.SubTitle = CardSubTitle;
Card.Action = CardAction;

export default function Card({ children, active, disabled, showToggle, onToggle, style, ...props }, { enforceReadonly = false, readonly = true, toggleReadonly }) {

  const classes = classNames({
    [styles.card]: true,
    [styles.disabled]: disabled,
    [styles.active]: active !== undefined ? active : !readonly
  });

  const toggle = () => {
    if (onToggle) onToggle();
    if (toggleReadonly) toggleReadonly();
  };

  return (
    <div className={classes} style={style}>
      {showToggle && readonly && !!toggleReadonly && !enforceReadonly && (
        <div onClick={toggle} className={styles.toggle}>
          <Icon info name="doka-icon-edit" />
        </div>
      )}
      <Spaced>
        {children}
      </Spaced>
    </div>
  );
}

Card.contextTypes = {
  readonly: PropTypes.bool,
  enforceReadonly: PropTypes.bool,
  toggleReadonly: PropTypes.func
};

Card.propTypes = {
  children: PropTypes.node.isRequired,
  active: PropTypes.bool,
  disabled: PropTypes.bool,
  showToggle: PropTypes.bool,
  onToggle: PropTypes.func,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object
};

Card.defaultProps = {
  active: undefined,
  disabled: undefined,
  showToggle: undefined,
  onToggle: undefined,
  style: undefined
};