import React, { Component, useState } from "react";
import { setUrlParam, deleteUrlParam } from "@hubleto/react-ui/core/Helper";
import Calendar from "./Calendar";
import ModalForm from "@hubleto/react-ui/core/ModalForm";
import FormActivitySelector from "./FormActivitySelector";
import request from "@hubleto/react-ui/core/Request";
import moment from 'moment';
import TranslatedComponent from "@hubleto/react-ui/core/TranslatedComponent";
import FormActivity from "./FormActivity";


interface CalendarMainProps {
  showActivity?: string,
  children: any,
  eventsEndpoint: string,
  views?: string,
  initialView?: string,
  height?: any,
  readonly?: number,
  onCreateCallback?: any
  onDateClick: any,
  onEventClick: any,
  calendars?: any,
}

interface CalendarMainState {
  showActivity?: string,
  events: Array<any>,
  showIdActivity?: number,
  dateClicked?: string,
  timeClicked?: string,
  activityFormComponent?: JSX.Element,
  activityFormModalProps?: any,
  newActivity: boolean,
  calendars: any,
  fOwnership: number,
  fCompleted: number,
}

export default class CalendarComponent extends TranslatedComponent<CalendarMainProps, CalendarMainState> {

  props: CalendarMainProps;
  state: CalendarMainState;

  translationContext: string = 'Hubleto\\App\\Community\\Calendar\\Loader';
  translationContextInner: string = 'Components\\CalendarMain';

  refCalendar: any;
  refActivityModal: any;
  refActivityForm: any;
  // refActivityModal: any;
  // refActivityForm: any;

  constructor(props) {
    super(props);

    this.refCalendar = React.createRef();
    this.refActivityModal = React.createRef();
    this.refActivityForm = React.createRef();
    // this.refActivityModal = React.createRef();
    // this.refActivityForm = React.createRef();

    this.state = {
      showActivity: this.props.showActivity ?? '',
      events: [],
      showIdActivity: 0,
      dateClicked: "",
      timeClicked: "",
      newActivity: false,
      calendars: this.props.calendars,
      fOwnership: 0,
      fCompleted: 0,
    };
  }

  getCalenActivitiesEndpointUrl(showActivity?: string, eventId?: number): string {
    return (
      'calendar/api/get-calendar-events?'
      + 'fOwnership=' + this.state.fOwnership
      + '&fCompleted=' + this.state.fCompleted
      + '&' + Object.keys(this.state.calendars)
        .filter((calendarName) => this.state.calendars[calendarName].show)
        .map((calendarName) => 'calendars[]=' + calendarName)
        .join('&')
      // + (showActivity ? '&source=' + showActivity : '')
      + (eventId ? '&id=' + eventId : '')
    );
  }

  renderCell = (eventInfo) => {
    return <>
      <b>{eventInfo.timeText}</b>
      <span style={{marginLeft: 4}}>{eventInfo.event.title}</span>
      <i style={{marginLeft: 4}}>({eventInfo.event.extendedProps.type})</i>
    </>;
  }

  render(): JSX.Element {
    let eventForm = null;
    if (this.state.showActivity) {

      setUrlParam('showActivity', this.state.showActivity);

      const activityCalendar = this.state.showActivity.split(',')[0];
      const activityId = this.state.showActivity.split(',')[1];
      let calendar = this.state.calendars[activityCalendar];

      eventForm = globalThis.hubleto.renderReactElement(calendar.formComponent,
        {
          ref: this.refActivityForm,
          description: {
            defaultValues: {
              date_start: this.state.dateClicked,
              time_start: this.state.timeClicked ?? moment().format('HH:mm:ss'),
              date_end: this.state.dateClicked,
              time_end: moment().add(30, 'minutes').format("HH:mm:ss"),
            }
          },
          id: activityId,
          modal: this.refActivityModal,
          onClose:() => {this.setState({showActivity: ''})},
          onSaveCallback:() => {this.setState({showActivity: ''})}
        }
      )
    } else {
      deleteUrlParam('showActivity');
    }

    return <div className="flex gap-2 flex-col md:flex-row">
      <div className="flex flex-col gap-2 text-nowrap">
        <button
          className="btn btn-add-outline mb-2"
          onClick={() => {
            this.setState({
              showActivity: 'calendar,-1',
              dateClicked: moment().format('YYYY-MM-DD'),
              timeClicked: moment().format('HH:mm:ss'),
            });
          }}
        >
          <span className="icon"><i className="fas fa-plus"></i></span>
          <span className="text">{this.translate("New activity")}</span>
        </button>

        <b>{this.translate('Calendars')}</b>
        <div className="list">
          {Object.keys(this.props.calendars).map((calendarName: any) => {
            const calendar = this.props.calendars[calendarName];

            return <button
              className="btn btn-small btn-list-item btn-transparent"
              style={{"borderLeft": "1em solid " + calendar.color}}
              onClick={() => {
                let calendars = this.state.calendars;
                calendars[calendarName].show = !calendars[calendarName].show;
                this.setState({calendars: calendars});
              }}
            >
              <span className="icon"><input type="checkbox" checked={this.state.calendars[calendarName].show}></input></span>
              <span className="text">{calendar.title}</span>
              {calendar.missedActivities > 0 ?
                <div className="badge badge-small badge-red ml-auto mr-1">{calendar.missedActivities}</div>
              : null}
            </button>;
          })}
        </div>

        <div className="list">
          <button
            className={"btn btn-small btn-list-item " + (this.state.fOwnership == 0 ? "btn-primary" : "btn-transparent")}
            onClick={() => { this.setState({fOwnership: 0}); }}
          ><span className="text">{this.translate("All")}</span></button>
          <button
            className={"btn btn-small btn-list-item " + (this.state.fOwnership == 1 ? "btn-primary" : "btn-transparent")}
            onClick={() => { this.setState({fOwnership: 1}); }}
          ><span className="text">{this.translate("My")}</span></button>
        </div>

        <div className="list">
          <button
            className={"btn btn-small btn-list-item " + (this.state.fCompleted == 0 ? "btn-primary" : "btn-transparent")}
            onClick={() => { this.setState({fCompleted: 0}); }}
          ><span className="text">{this.translate("All")}</span></button>
          <button
            className={"btn btn-small btn-list-item " + (this.state.fCompleted == 1 ? "btn-primary" : "btn-transparent")}
            onClick={() => { this.setState({fCompleted: 1}); }}
          ><span className="text">{this.translate("Open")}</span></button>
          <button
            className={"btn btn-small btn-list-item " + (this.state.fCompleted == 2 ? "btn-primary" : "btn-transparent")}
            onClick={() => { this.setState({fCompleted: 2}); }}
          ><span className="text">{this.translate("Completed")}</span></button>
        </div>

        <a
          className="btn btn-primary-outline mt-2"
          href={globalThis.hubleto.config.projectUrl + "/calendar/share"}
        >
          <span className="icon"><i className="fa-solid fa-share-nodes"></i></span>
          <span className="text">{this.translate("Share calendar")}</span>
        </a>
      </div>
      <div className="w-full">
        <Calendar
          ref={this.refCalendar}
          readonly={false}
          views={"timeGridDay,timeGridWeek,dayGridMonth,listYear"}
          height={this.props.height}
          initialView={this.props.initialView ?? "timeGridWeek"}
          eventsEndpoint={globalThis.hubleto.config.projectUrl + '/' + this.getCalenActivitiesEndpointUrl(this.props.showActivity)}
          onEventsLoaded={(events) => {
          }}
          onDateClick={(date, time, info) => {
            this.setState({
              showActivity: 'calendar,-1',
              dateClicked: date,
              timeClicked: info.view.type == "dayGridMonth" ? null : time
            });
          }}
          onEventClick={(info) => {
            if (info.event.url) {
              globalThis.window.open(globalThis.hubleto.config.projectUrl + '/' + info.event.url);
            } else {
              this.setState({
                showActivity: info.event.extendedProps.source + ',' + info.event.id,
              });
            }

            info.jsEvent.preventDefault();
          }}
        ></Calendar>
      </div>
      {eventForm ? <ModalForm
        ref={this.refActivityModal}
        form={this.refActivityForm}
        uid='event_modal'
        isOpen={true}
        type='right'
        onClose={() => this.setState({showActivity: ''})}
      >{eventForm}</ModalForm> : null}
    </div>;
  }
}
