"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _DeviceListCall = _interopRequireDefault(require("./DeviceListCall"));

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

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

/**
 * @category communication
 * @component alert-call
 * @variations collab-ui-react
 */
var AlertCall = function AlertCall(props) {
  var avatar = props.avatar,
      caller = props.caller,
      defaultSelectedDevice = props.defaultSelectedDevice,
      deviceListHeader = props.deviceListHeader,
      devices = props.devices,
      onAnswerVideo = props.onAnswerVideo,
      onAnswerVoice = props.onAnswerVoice,
      onDeviceSelect = props.onDeviceSelect,
      onReject = props.onReject,
      rejectAriaLabel = props.rejectAriaLabel,
      show = props.show,
      title = props.title,
      videoAriaLabel = props.videoAriaLabel,
      voiceAriaLabel = props.voiceAriaLabel;

  var getAvatar = function getAvatar() {
    if (avatar) {
      return avatar;
    } else {
      switch (caller.type) {
        case 'number':
          return _react.default.createElement(_.Avatar, {
            title: "#",
            alt: caller.title,
            size: "xlarge"
          });

        case 'device':
          return _react.default.createElement(_.Avatar, {
            icon: _react.default.createElement(_.Icon, {
              name: "spark-board_32"
            }),
            alt: caller.title,
            size: "xlarge"
          });

        default:
          return _react.default.createElement(_.Avatar, {
            title: caller.title,
            alt: caller.title,
            size: "xlarge"
          });
      }
    }
  };

  var getDeviceList = function getDeviceList() {
    return devices.length > 0 && _react.default.createElement(_DeviceListCall.default, {
      devices: devices,
      header: deviceListHeader,
      onSelect: onDeviceSelect,
      defaultSelected: defaultSelectedDevice
    });
  };

  return show && _react.default.createElement("div", {
    className: "cui-alert cui-alert--call"
  }, _react.default.createElement("div", {
    className: "cui-alert__title"
  }, title), _react.default.createElement("div", {
    className: "cui-alert__caller"
  }, getAvatar(), _react.default.createElement("div", {
    className: "cui-alert__caller-title"
  }, caller.title), _react.default.createElement("div", {
    className: "cui-alert__caller-subtitle"
  }, caller.alt)), getDeviceList(), _react.default.createElement("div", {
    className: "cui-alert--call--buttons"
  }, _react.default.createElement(_.Button, {
    children: _react.default.createElement(_.Icon, {
      name: "camera_24"
    }),
    onClick: onAnswerVideo,
    ariaLabel: videoAriaLabel,
    color: "green",
    circle: true,
    size: 44
  }), onAnswerVoice && _react.default.createElement(_.Button, {
    children: _react.default.createElement(_.Icon, {
      name: "handset_24"
    }),
    onClick: onAnswerVoice,
    ariaLabel: voiceAriaLabel,
    color: "green",
    circle: true,
    size: 44
  }), _react.default.createElement(_.Button, {
    children: _react.default.createElement(_.Icon, {
      name: "cancel_24"
    }),
    onClick: onReject,
    ariaLabel: rejectAriaLabel,
    color: "red",
    circle: true,
    size: 44
  })));
};

AlertCall.defaultProps = {
  avatar: null,
  caller: null,
  defaultSelectedDevice: 0,
  deviceListHeader: 'Device selection',
  devices: [],
  onAnswerVideo: null,
  onAnswerVoice: null,
  onDeviceSelect: null,
  onReject: null,
  rejectAriaLabel: 'reject call',
  title: '',
  videoAriaLabel: 'answer call with voice and video',
  voiceAriaLabel: 'answer call with voice only'
};
AlertCall.propTypes = {
  /** @prop Optional avatar prop | null */
  avatar: _propTypes.default.node,

  /** @prop Required caller object */
  caller: _propTypes.default.shape({
    title: _propTypes.default.string.isRequired,
    alt: _propTypes.default.string,
    src: _propTypes.default.string,
    type: _propTypes.default.oneOf(['', 'number', 'device'])
  }).isRequired,

  /** @prop Optional default selected device | 0 */
  defaultSelectedDevice: _propTypes.default.number,

  /** @prop Optional header string for device selection list | "Device selection" */
  deviceListHeader: _propTypes.default.string,

  /** @prop Optional list of devices to answer call with | [] */
  devices: _propTypes.default.array,

  /** @prop Callback function invoked when the video button is clicked | null */
  onAnswerVideo: _propTypes.default.func,

  /** @prop Callback function invoked when the handset button is clicked | null */
  onAnswerVoice: _propTypes.default.func,

  /** @prop Optional callback function when device is selected | null */
  onDeviceSelect: _propTypes.default.func,

  /** @prop Callback function invoked when the reject button is clicked | null */
  onReject: _propTypes.default.func,

  /** @prop Optional aria-label reject message | 'reject call' */
  rejectAriaLabel: _propTypes.default.string,

  /** @prop Required AlertCall visitibility setting */
  show: _propTypes.default.bool.isRequired,

  /** @prop Optional title of AlertCall | '' */
  title: _propTypes.default.string,

  /** @prop Optional aria-label video | 'answer call with voice and video' */
  videoAriaLabel: _propTypes.default.string,

  /** @prop Optional aria-label voice | 'answer call with voice only' */
  voiceAriaLabel: _propTypes.default.string
};
AlertCall.displayName = 'AlertCall';
var _default = AlertCall;
/**
* @name Call
* @description Control the avatar type by passing in the type of caller to the caller.type prop.  There can only be 2 Call Alerts active at one time.
*
* @category communication
* @component alert
* @section call
*
* @js

import {
  Button,
  AlertCall,
  AlertCallContainer
} from '@collab-ui/react';
import {
  uniqueId,
  reject
} from 'lodash';

export default class Default extends React.PureComponent {
  state = {
    alertList: [],
    caller: {title: 'Jefe Guadelupe', alt: '+ 1 972-555-1212'},
    devices: [
      {name: 'SJC21-Babelfish', value: '1010101', type: 'device'},
      {name: 'Use my computer', value: '2020202'}
    ]
  }

  handleOnReject = key => {
    console.log(`onRejectCall ${key}`);
    this.setState(state => {
      return { alertList: reject(state.alertList, {key}) };
    });
  }

  handleOnAnswerVoice = key => {
    console.log(`onAnswerVoice ${key}`);
    this.setState(state => {
      return { alertList: reject(state.alertList, {key}) };
    });
  }

  handleOnAnswerVideo = key => {
    console.log(`onAnswerVideo ${key}`);
    this.setState(state => {
      return { alertList: reject(state.alertList, {key}) };
    });
  }

  renderPersonCaller = () => {
    const key = uniqueId('call_alert_');
    return (
      <AlertCall
        key={key}
        title='Incoming Call'
        caller={this.state.caller}
        onReject={() => this.handleOnReject(key)}
        onAnswerVoice={() => this.handleOnAnswerVoice(key)}
        onAnswerVideo={() => this.handleOnAnswerVideo(key)}
        onDeviceSelect={() => console.log("onDeviceSelect")}
        show
      />
    );
  };

  renderDeviceCaller = () => {
    const key = uniqueId('call_alert_');
    return (
      <AlertCall
        key={key}
        title='Incoming Call'
        caller={{title: 'SJC21-Babelfish', alt: '+ 1 408-555-1212', type: 'device'}}
        onReject={() => this.handleOnReject(key)}
        onAnswerVoice={() => this.handleOnAnswerVoice(key)}
        onAnswerVideo={() => this.handleOnAnswerVideo(key)}
        onDeviceSelect={() => console.log("onDeviceSelect")}
        show
      />
    );
  };

  renderNumberOnlyCaller = () => {
    const key = uniqueId('call_alert_');
    return (
      <AlertCall
        key={key}
        title='Incoming Call'
        caller={{title: '+ 1 408-555-1212', type: 'number'}}
        onReject={() => this.handleOnReject(key)}
        onAnswerVoice={() => this.handleOnAnswerVoice(key)}
        onAnswerVideo={() => this.handleOnAnswerVideo(key)}
        onDeviceSelect={() => console.log("onDeviceSelect")}
        show
      />
    );
  };

  renderCallerWithDevices = () => {
    const key = uniqueId('call_alert_');
    return (
      <AlertCall
        key={key}
        title='Incoming Call'
        caller={this.state.caller}
        devices={this.state.devices}
        onReject={() => this.handleOnReject(key)}
        onAnswerVoice={() => this.handleOnAnswerVoice(key)}
        onAnswerVideo={() => this.handleOnAnswerVideo(key)}
        onDeviceSelect={() => console.log("onDeviceSelect")}
        show
      />
    );
  };

  render() {
    return (
      <section>
        <div>
          <div className='row'>
            <Button
              ariaLabel='Click to Open'
              onClick={() => {
                this.setState(state => ({
                  alertList: [...state.alertList, this.renderPersonCaller()]
                }));
              }}
              children='Person Caller'
              color='primary'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => {
                this.setState(state => ({
                  alertList: [...state.alertList, this.renderDeviceCaller()]
                }));
              }}
              children='Device Caller'
              color='primary'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => {
                this.setState(state => ({
                  alertList: [...state.alertList, this.renderNumberOnlyCaller()]
                }));
              }}
              children='Number Only Caller'
              color='primary'
            />
          </div>
          <div className='row'>
            <br />
            <Button
              ariaLabel='Click to Open'
              onClick={() => {
                this.setState(state => ({
                  alertList: [...state.alertList, this.renderCallerWithDevices()]
                }));
              }}
              children='Caller with Device List'
              color='primary'
            />
          </div>
          <br />
          <AlertCallContainer
            alertList={this.state.alertList}
          />
        </div>
      </section>
    );
  }
}

**/

exports.default = _default;