import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { Fragment } from 'react';
import { connect } from '../../../redux/store';
import { compose, lifecycle, withHandlers, withProps } from 'recompose';
import { Utils, ErrorNotFound, selectHasRoleSchedulerAdmin, Table, LoadingMessage } from '@kineticdata/bundle-common';
import { PageTitle } from '../../shared/PageTitle';
import { Link } from '@reach/router';
import moment from 'moment';
import { actions } from '../../../redux/modules/appointments';
import { I18n, Moment } from '@kineticdata/react';
import { TechBarDisplayMembers } from './TechBarDisplayMembers';
import { TIME_FORMAT } from '../../../constants';
export var TechBarComponent = function TechBarComponent(_ref) {
  var techBar = _ref.techBar,
      hasManagerAccess = _ref.hasManagerAccess,
      appointments = _ref.appointments,
      appointmentDate = _ref.appointmentDate,
      handlePreviousDay = _ref.handlePreviousDay,
      handleNextDay = _ref.handleNextDay,
      handleToday = _ref.handleToday,
      isToday = _ref.isToday;
  return techBar ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PageTitle, {
    parts: [techBar.values['Name']],
    settings: true
  }), /*#__PURE__*/React.createElement("div", {
    className: "page-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-panel page-panel--white"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, /*#__PURE__*/React.createElement("div", {
    role: "navigation",
    "aria-label": "breadcrumbs",
    className: "page-title__breadcrumbs"
  }, /*#__PURE__*/React.createElement("span", {
    className: "breadcrumb-item"
  }, /*#__PURE__*/React.createElement(Link, {
    to: "../../../"
  }, /*#__PURE__*/React.createElement(I18n, null, "tech bar"))), ' ', /*#__PURE__*/React.createElement("span", {
    "aria-hidden": "true"
  }, "/ "), /*#__PURE__*/React.createElement("span", {
    className: "breadcrumb-item"
  }, /*#__PURE__*/React.createElement(Link, {
    to: "../../"
  }, /*#__PURE__*/React.createElement(I18n, null, "settings"))), ' ', /*#__PURE__*/React.createElement("span", {
    "aria-hidden": "true"
  }, "/ "), /*#__PURE__*/React.createElement("span", {
    className: "breadcrumb-item"
  }, /*#__PURE__*/React.createElement(Link, {
    to: "../"
  }, /*#__PURE__*/React.createElement(I18n, null, "tech bars"))), ' ', /*#__PURE__*/React.createElement("span", {
    "aria-hidden": "true"
  }, "/ "), /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement(I18n, null, techBar.values['Name']))), hasManagerAccess && /*#__PURE__*/React.createElement(Link, {
    to: "edit",
    className: "btn btn-primary"
  }, /*#__PURE__*/React.createElement(I18n, null, "Edit Settings"))), /*#__PURE__*/React.createElement("div", {
    className: "content-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "section__title"
  }, /*#__PURE__*/React.createElement(I18n, null, "General Settings")), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement(I18n, null, "Allow Walk-Ins")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(I18n, null, techBar.settings.allowWalkIns ? 'Yes' : 'No'))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement(I18n, null, "Feedback Identification")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(I18n, null, techBar.settings.feedbackIdentitifcation)))), /*#__PURE__*/React.createElement("div", {
    className: "mb-5"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "section__title"
  }, /*#__PURE__*/React.createElement(I18n, null, "Front Desk Users")), /*#__PURE__*/React.createElement(TechBarDisplayMembers, {
    techBar: techBar,
    hasManagerAccess: hasManagerAccess
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
    className: "section__title"
  }, /*#__PURE__*/React.createElement(I18n, null, "Appointments")), /*#__PURE__*/React.createElement("div", {
    className: "appointments-control mb-3"
  }, /*#__PURE__*/React.createElement("div", {
    className: "btn-group"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-inverse",
    onClick: handlePreviousDay
  }, /*#__PURE__*/React.createElement("span", {
    className: "fa fa-chevron-left"
  })), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-inverse",
    onClick: handleToday,
    disabled: isToday
  }, /*#__PURE__*/React.createElement(I18n, null, "Today")), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-inverse",
    onClick: handleNextDay
  }, /*#__PURE__*/React.createElement("span", {
    className: "fa fa-chevron-right"
  }))), /*#__PURE__*/React.createElement("span", {
    className: "ml-3"
  }, /*#__PURE__*/React.createElement(Moment, {
    timestamp: appointmentDate,
    format: Moment.formats.dateWithDay
  }))), appointments ? /*#__PURE__*/React.createElement(Table, {
    props: {
      "class": 'table--settings table-hover',
      name: 'appointments-table',
      id: 'appointments-table'
    },
    data: appointments.map(function (a) {
      return _objectSpread(_objectSpread({}, a.values), {}, {
        _id: a.id,
        _coreState: a.coreState
      });
    }).toJS(),
    columns: [{
      value: 'Summary',
      title: 'Summary',
      renderBodyCell: function renderBodyCell(_ref2) {
        var content = _ref2.content,
            row = _ref2.row;
        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Link, {
          to: "appointment/".concat(row._id)
        }, content));
      }
    }, {
      value: 'Requested For Display Name',
      title: 'User'
    }, {
      value: 'Event Time',
      title: 'Time',
      renderBodyCell: function renderBodyCell(_ref3) {
        var content = _ref3.content,
            row = _ref3.row;
        var start = moment.utc(row['Event Time'], TIME_FORMAT);
        var end = start.clone().add(row['Event Duration'], 'minute');
        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Moment, {
          timestamp: start,
          format: Moment.formats.time
        }), " - ", /*#__PURE__*/React.createElement(Moment, {
          timestamp: end,
          format: Moment.formats.time
        }));
      }
    }, {
      value: 'Event Type',
      title: 'Event Type'
    }, {
      value: 'Status',
      title: 'Status',
      width: '1%',
      renderBodyCell: function renderBodyCell(_ref4) {
        var content = _ref4.content,
            row = _ref4.row;
        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
          className: "badge ".concat(row._coreState === 'Closed' ? 'badge-dark' : 'badge-success')
        }, /*#__PURE__*/React.createElement(I18n, null, content)));
      }
    }],
    emptyMessage: "There are no appointments for the selected date.",
    filtering: false,
    pagination: false,
    sortOrder: 2,
    render: function render(_ref5) {
      var table = _ref5.table;
      return /*#__PURE__*/React.createElement("div", {
        className: "table-wrapper"
      }, table);
    }
  }) : /*#__PURE__*/React.createElement(LoadingMessage, null)))))) : /*#__PURE__*/React.createElement(ErrorNotFound, null);
};
export var mapStateToProps = function mapStateToProps(state, props) {
  var isSchedulerAdmin = selectHasRoleSchedulerAdmin(state.app.profile);
  var techBar = state.techBarApp.schedulers.find(function (scheduler) {
    return scheduler.id === props.techBarId && (isSchedulerAdmin || Utils.isMemberOf(state.app.profile, "Role::Scheduler::".concat(scheduler.values['Name'])) || Utils.isMemberOf(state.app.profile, "Scheduler::".concat(scheduler.values['Name'])));
  });
  return {
    kapp: state.app.kapp,
    techBar: techBar,
    hasManagerAccess: isSchedulerAdmin || techBar && Utils.isMemberOf(state.app.profile, "Role::Scheduler::".concat(techBar.values['Name'])),
    appointmentError: state.appointments.error,
    appointments: state.appointments.list,
    appointmentDate: state.appointments.listDate
  };
};
export var mapDispatchToProps = {
  fetchAppointmentsListRequest: actions.fetchAppointmentsListRequest,
  setAppointmentsListDate: actions.setAppointmentsListDate
};
export var TechBar = compose(connect(mapStateToProps, mapDispatchToProps), withProps(function (_ref6) {
  var appointmentDate = _ref6.appointmentDate;
  return {
    isToday: appointmentDate.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')
  };
}), withHandlers({
  handlePreviousDay: function handlePreviousDay(_ref7) {
    var appointmentDate = _ref7.appointmentDate,
        setAppointmentsListDate = _ref7.setAppointmentsListDate,
        techBar = _ref7.techBar;
    return function () {
      setAppointmentsListDate({
        date: appointmentDate.add(-1, 'day'),
        schedulerId: techBar.values['Id']
      });
    };
  },
  handleNextDay: function handleNextDay(_ref8) {
    var appointmentDate = _ref8.appointmentDate,
        setAppointmentsListDate = _ref8.setAppointmentsListDate,
        techBar = _ref8.techBar;
    return function () {
      setAppointmentsListDate({
        date: appointmentDate.add(1, 'day'),
        schedulerId: techBar.values['Id']
      });
    };
  },
  handleToday: function handleToday(_ref9) {
    var setAppointmentsListDate = _ref9.setAppointmentsListDate,
        techBar = _ref9.techBar;
    return function () {
      setAppointmentsListDate({
        date: moment(),
        schedulerId: techBar.values['Id']
      });
    };
  }
}), lifecycle({
  componentDidMount: function componentDidMount() {
    this.props.fetchAppointmentsListRequest({
      schedulerId: this.props.techBar.values['Id']
    });
  }
}))(TechBarComponent);