import React, { Component } from 'react';
import FormExtended, { FormExtendedProps, FormExtendedState } from '@hubleto/react-ui/ext/FormExtended';
import moment from 'moment';

export interface FormSharedCalendarProps extends FormExtendedProps {
  onUpdate: () => void;
}

export interface FormSharedCalendarState extends FormExtendedState {}

export default class FormSharedCalendar<P, S> extends FormExtended<FormSharedCalendarProps,FormSharedCalendarState> {
  static defaultProps: any = {
    ...FormExtended.defaultProps,
    model: 'Hubleto/App/Community/Calendar/Models/SharedCalendar',
  };

  props: FormSharedCalendarProps;
  state: FormSharedCalendarState;

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

  renderTitle(): JSX.Element {
    return <>
      <small>{this.translate('Shared calendar')}</small>
      <h2>{this.state.record.subject ?? ''}</h2>
    </>;
  }

  onAfterSaveRecord(saveResponse: any) {
    super.onAfterSaveRecord(saveResponse);
    this.props.onUpdate();
  }

  onAfterDeleteRecord(deleteResponse: any) {
    super.onAfterDeleteRecord(deleteResponse);
    this.props.onUpdate();
  }

  renderContent(): JSX.Element {

    return <>
      {this.inputWrapper("id_owner")}
      {this.inputWrapper("calendar")}
      {this.inputWrapper("view_details")}
      {this.inputWrapper("enabled")}
      <div className="flex align-middle justify-between">
        <div>
          {this.inputWrapper("date_from")}
        </div>
        <div>
          {this.inputWrapper("date_to")}
        </div>
      </div>

      { this.state.record.id > 0 &&
        <div className="flex gap-2 mt-4 input-element">
          <input type="text" className={"flex-grow bg-muted"} value={globalThis.hubleto.config.projectUrl + "/calendar/" + this.state.record.share_key + "/ics"} readOnly={true}/>
          <button className="btn btn-primary px-2" onClick={() => navigator.clipboard.writeText(globalThis.hubleto.config.projectUrl + "/calendar/" + this.state.record.share_key + "/ics")}>
            {this.translate('Copy share link')}
          </button>
        </div>
      }

    </>;
  }
}
