'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require('./..');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * @category communication
 * @component alert-call
 * @variations collab-ui-react
 */

var _ref = _react2.default.createElement(_.Icon, { name: 'spark-board_32' });

var _ref2 = _react2.default.createElement(_.Icon, { name: 'camera_24' });

var _ref3 = _react2.default.createElement(_.Icon, { name: 'handset_24' });

var _ref4 = _react2.default.createElement(_.Icon, { name: 'cancel_24' });

var AlertCall = function AlertCall(props) {
  var caller = props.caller,
      onAnswerVideo = props.onAnswerVideo,
      onAnswerVoice = props.onAnswerVoice,
      onReject = props.onReject,
      show = props.show,
      title = props.title;


  var getAvatar = function getAvatar() {
    switch (caller.type) {
      case 'number':
        return _react2.default.createElement(_.Avatar, { title: '#', alt: caller.title, size: 'xlarge' });
      case 'device':
        return _react2.default.createElement(_.Avatar, { icon: _ref, alt: caller.title, size: 'xlarge' });
      default:
        return _react2.default.createElement(_.Avatar, { title: caller.title, alt: caller.title, size: 'xlarge' });
    }
  };

  return show && _react2.default.createElement(
    _.AlertContainer,
    { className: 'cui-alert--call' },
    _react2.default.createElement(
      'div',
      { className: 'cui-alert__title' },
      title
    ),
    _react2.default.createElement(
      'div',
      { className: 'cui-alert__caller' },
      getAvatar(),
      _react2.default.createElement(
        'div',
        { className: 'cui-alert__caller-title' },
        caller.title
      ),
      _react2.default.createElement(
        'div',
        { className: 'cui-alert__caller-subtitle' },
        caller.alt
      )
    ),
    _react2.default.createElement(
      'div',
      { className: 'cui-alert--call--buttons' },
      _react2.default.createElement(_.Button, {
        children: _ref2,
        onClick: onAnswerVideo,
        ariaLabel: 'answer call with voice and video',
        color: 'green',
        circle: true,
        large: true
      }),
      _react2.default.createElement(_.Button, {
        children: _ref3,
        onClick: onAnswerVoice,
        ariaLabel: 'answer call with voice only',
        color: 'green',
        circle: true,
        large: true
      }),
      _react2.default.createElement(_.Button, {
        children: _ref4,
        onClick: onReject,
        ariaLabel: 'reject call',
        color: 'red',
        circle: true,
        large: true
      })
    )
  );
};

AlertCall.defaultProps = {
  caller: null,
  title: '',
  onRejectCall: null,
  onVoiceCall: null,
  onVideoCall: null
};

AlertCall.displayName = 'AlertCall';

exports.default = AlertCall;

/**
* @name Call
* @description Control the avatar type by passing in the type of caller to the caller.type prop.
*
* @category communication
* @component alert
* @section call
*
* @js

import {
  Button,
  AlertCall
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showAlert: false,
    caller: {title: 'Jefe Guadelupe', alt: '+ 1 972-555-1212'}
  }

  render() {
    return (
      <section>
        <div>
          <div className='row'>
            <Button
              ariaLabel='Click to Open'
              onClick={() => this.setState({ showAlert: true, caller: {title: 'Jefe Guadelupe', alt: '+ 1 972-555-1212'} })}
              children='Person Caller'
              color='primary'
              size='large'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => this.setState({ showAlert: true, caller: {title: 'SJC21-Babelfish', alt: '+ 1 408-555-1212', type: 'device'} })}
              children='Device Caller'
              color='primary'
              size='large'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => this.setState({ showAlert: true, caller: {title: '+ 1 408-555-1212', type: 'number'} })}
              children='Number Only Caller'
              color='primary'
              size='large'
            />
          </div>
          <br />
          <AlertCall
            title='Incoming call'
            caller={this.state.caller}
            show={this.state.showAlert}
            onReject={() => this.setState({ showAlert: false})}
            onAnswerVoice={() => this.setState({ showAlert: false})}
            onAnswerVideo={() => this.setState({ showAlert: false})}
          />
        </div>
      </section>
    );
  }
}

**/

module.exports = exports['default'];