import React, { Fragment } from 'react';
import { connect } from '../redux/store';
import { compose, withHandlers, withState, withProps } from 'recompose';
import { ErrorNotFound, ErrorUnauthorized, ErrorUnexpected, TaskActions, addToastAlert } from '@kineticdata/bundle-common';
import { DisplayTabs } from './Display';
import { TIME_FORMAT } from '../constants';
import { actions } from '../redux/modules/appointments';
import moment from 'moment';
import { CoreForm, Moment, I18n } from '@kineticdata/react';
export var CheckInComponent = function CheckInComponent(_ref) {
  var crosslink = _ref.crosslink,
      kapp = _ref.kapp,
      techBarId = _ref.techBarId,
      techBar = _ref.techBar,
      appointments = _ref.appointments,
      error = _ref.error,
      showDetails = _ref.showDetails,
      toggleShowDetails = _ref.toggleShowDetails,
      input = _ref.input,
      setInput = _ref.setInput,
      getFilteredAppointments = _ref.getFilteredAppointments;
  var filteredAppointments = showDetails === 'appointment' && input.length > 2 ? getFilteredAppointments() : null;
  return /*#__PURE__*/React.createElement("section", {
    className: "tech-bar-display tech-bar-display--checkin"
  }, !showDetails ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "full-screen-container"
  }, crosslink && /*#__PURE__*/React.createElement(DisplayTabs, {
    techBarId: techBarId,
    checkInClassName: 'bg-dark',
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "header bg-dark"
  }), /*#__PURE__*/React.createElement("div", {
    className: "body"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form"
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn--checkin btn-success",
    onClick: function onClick() {
      return toggleShowDetails('appointment');
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "I have an appointment")), techBar.settings.allowWalkIns && /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn--checkin btn-info",
    onClick: function onClick() {
      return toggleShowDetails('walkin');
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "I am a walk-in")))))) : /*#__PURE__*/React.createElement(Fragment, null, showDetails === 'appointment' && /*#__PURE__*/React.createElement("div", {
    className: "full-screen-container"
  }, crosslink && /*#__PURE__*/React.createElement(DisplayTabs, {
    techBarId: techBarId,
    checkInClassName: 'bg-success',
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "header bg-success"
  }), /*#__PURE__*/React.createElement("div", {
    className: "body"
  }, /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement(I18n, null, "I have an appointment"), /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn-outline-danger",
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "Cancel"))), /*#__PURE__*/React.createElement("div", {
    className: "form"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: "appointment-search-input"
  }, /*#__PURE__*/React.createElement(I18n, null, "Find Appointment by Name or Email")), /*#__PURE__*/React.createElement("input", {
    type: "text",
    name: "appointment-search-input",
    id: "appointment-search-input",
    className: "form-control",
    autoComplete: "off",
    value: input,
    onChange: function onChange(e) {
      return setInput(e.target.value);
    }
  }))), filteredAppointments && /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, filteredAppointments.map(function (appt) {
    return /*#__PURE__*/React.createElement("div", {
      className: "tech-bar-appointment-card",
      key: appt.id
    }, /*#__PURE__*/React.createElement("div", {
      className: "details"
    }, /*#__PURE__*/React.createElement("div", null, appt.values['Requested For Display Name']), /*#__PURE__*/React.createElement("div", {
      className: "text-muted"
    }, /*#__PURE__*/React.createElement(Moment, {
      timestamp: moment(appt.values['Event Time'], TIME_FORMAT),
      format: Moment.formats.time
    }), ' - ', /*#__PURE__*/React.createElement(I18n, null, appt.values['Event Type']))), /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "btn btn-primary",
      onClick: function onClick() {
        return TaskActions.createAction({
          action: "Tech Bar Check In - ".concat(appt.values['Scheduler Id']),
          type: 'submission',
          operation: 'update',
          relatedId: appt.id,
          jsonInput: {
            values: {
              Status: 'Checked In'
            }
          },
          successCallback: function successCallback() {
            toggleShowDetails(null);
            addToastAlert({
              severity: 'success',
              title: "".concat(appt.values['Requested For Display Name'], " has been successfully checked in."),
              duration: 5000
            });
          },
          errorCallback: function errorCallback() {
            toggleShowDetails(null);
            addToastAlert({
              title: 'There was an error while checking you in.',
              duration: 5000
            });
          }
        });
      }
    }, /*#__PURE__*/React.createElement(I18n, null, "Check In")));
  }), filteredAppointments.size === 0 && (!error && !appointments ? /*#__PURE__*/React.createElement("div", {
    className: "text-center"
  }, /*#__PURE__*/React.createElement("span", {
    className: "fa fa-spinner fa-spin"
  })) : /*#__PURE__*/React.createElement("div", {
    className: "alert alert-warning text-center"
  }, /*#__PURE__*/React.createElement(I18n, null, "No appointments found.")))))), showDetails === 'walkin' && /*#__PURE__*/React.createElement("div", {
    className: "full-screen-container"
  }, crosslink && /*#__PURE__*/React.createElement(DisplayTabs, {
    techBarId: techBarId,
    checkInClassName: 'bg-info',
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "header bg-info"
  }), /*#__PURE__*/React.createElement("div", {
    className: "body form-unstyled"
  }, /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement(I18n, null, "I am a walk-in"), /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "btn btn-outline-danger",
    onClick: function onClick() {
      return toggleShowDetails(null);
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "Cancel"))), /*#__PURE__*/React.createElement(I18n, {
    context: "kapps.".concat(kapp.slug, ".forms.walk-in")
  }, /*#__PURE__*/React.createElement(CoreForm, {
    className: "body",
    kapp: kapp.slug,
    form: "walk-in",
    values: {
      'Scheduler Id': techBarId
    },
    completed: function completed() {
      toggleShowDetails(null);
      addToastAlert({
        severity: 'success',
        title: 'You have successfully checked in.',
        duration: 5000
      });
    },
    notFoundComponent: ErrorNotFound,
    unauthorizedComponent: ErrorUnauthorized,
    unexpectedErrorComponent: ErrorUnexpected
  }))))));
};
export var mapStateToProps = function mapStateToProps(state, props) {
  return {
    kapp: state.app.kapp,
    error: state.appointments.error,
    appointments: state.appointments.today
  };
};
export var mapDispatchToProps = {
  fetchTodayAppointmentsRequest: actions.fetchTodayAppointmentsRequest
};

var toggleShowDetails = function toggleShowDetails(_ref2) {
  var showDetails = _ref2.showDetails,
      setShowDetails = _ref2.setShowDetails,
      setInput = _ref2.setInput,
      fetchTodayAppointmentsRequest = _ref2.fetchTodayAppointmentsRequest,
      techBarId = _ref2.techBarId;
  return function (name) {
    setShowDetails(showDetails === name ? null : name);
    setInput('');

    if (name === 'appointment') {
      fetchTodayAppointmentsRequest({
        schedulerId: techBarId,
        status: 'Scheduled'
      });
    }
  };
};

var getFilteredAppointments = function getFilteredAppointments(_ref3) {
  var input = _ref3.input,
      appointments = _ref3.appointments;
  return function () {
    return appointments ? appointments.filter(function (appt) {
      return appt.values['Requested For Display Name'].toLowerCase().includes(input.toLowerCase()) || appt.values['Requested For'].toLowerCase().includes(input.toLowerCase());
    }) : null;
  };
};

export var CheckIn = compose(withProps(function (_ref4) {
  var techBar = _ref4.techBar;
  return {
    techBarId: techBar.values['Id']
  };
}), connect(mapStateToProps, mapDispatchToProps), withState('showDetails', 'setShowDetails', null), withState('input', 'setInput', ''), withHandlers({
  toggleShowDetails: toggleShowDetails,
  getFilteredAppointments: getFilteredAppointments
}))(CheckInComponent);