import { CalendarControlBase } from '../../../widgets/calendar-control-base';
import { throttle, Util } from '@ibizstudio/runtime';
import { IPSSysCalendar, IPSSysCalendarItem } from '@ibizstudio/runtime';

/**
 * 应用日历部件基类
 *
 * @export
 * @class AppCalendarBase
 * @extends {CalendarControlBase}
 */
export class AppCalendarBase extends CalendarControlBase {
  /**
   * TODO绘制日历项
   *
   * @memberof AppCalendarBase
   */
  renderCalendarItems() {
    const calendarItems: Array<IPSSysCalendarItem> = (this.controlInstance as IPSSysCalendar).getPSSysCalendarItems() || [];
    if (calendarItems.length > 1) {
      return calendarItems.map((item: IPSSysCalendarItem) => {
        if (!item.itemType) {
          return null;
        }
        const itemClass = {
          'event-lengend': true,
          [item.itemType]: true,
          'event-disabled': !this.isShowlegend[item.itemType],
        };
        return (
          <div
            class={itemClass}
            on-click={() => {
              throttle(this.legendTrigger, [item.itemType as string], this);
            }}
          >
            <div class='lengend-icon' style={'background: ' + item.bKColor}></div>
            <span style={'color:' + item.color}>{item.name}</span>
          </div>
        );
      });
    }
  }

  /**
   * 绘制日历内容
   *
   * @memberof AppCalendarBase
   */
  renderContent() {
    let _this: any = this;
    if (this.ctrlParams) {
      return (
        <app-calendar-timeline
          ref='appCalendarTimeline'
          ctrlParams={this.ctrlParams}
          context={Util.deepCopy(this.context)}
          viewparams={Util.deepCopy(this.viewparams)}
          on-eventClick={(tempEvent: any) => {
            throttle(this.onEventClick, [tempEvent, true], this);
          }}
          events={this.searchEvents}
        ></app-calendar-timeline>
      );
    }
    <div>未支持</div>;
  }

  /**
   * TODO 绘制批操作工具栏
   *
   * @memberof AppCalendarBase
   */
  renderBatchToolbar() {}

  /**
   * 绘制数据项面板
   *
   * @param item 数据项
   * @memberof AppCalendarBase
   */
  renderItemPanel(item: any, calendarItem: any) {
    let { targetCtrlName, targetCtrlParam, targetCtrlEvent }: { targetCtrlName: string; targetCtrlParam: any; targetCtrlEvent: any } = this.computeTargetCtrlData(
      calendarItem.getPSLayoutPanel(),
      item,
    );
    return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: item.id, on: targetCtrlEvent });
  }

  /**
   * 绘制数据项
   *
   * @param item 数据项
   * @param index 下标
   * @memberof AppCalendarBase
   */
  renderTimeLineItem(item: any, index: number) {
    const calendarItem = (this.controlInstance as IPSSysCalendar).getPSSysCalendarItems()?.find((_item: any) => {
      return item?.itemType == _item.itemType;
    });
    return (
      <el-timeline-item key={`${item.title}${index}`} color={item.color} timestamp={item.start} placement='top'>
        <context-menu contextMenuStyle={{ width: '100%', 'padding-right': '12px' }} data={item} renderContent={this.renderContextMenu.bind(this)}>
          <el-card
            nativeOn-click={() => {
              throttle(this.onTimeLineClick, [item], this);
            }}
            class={{ ...item.className, 'is-select': item.isSelect ? true : false }}
          >
            {calendarItem && calendarItem.getPSLayoutPanel() ? (
              this.renderItemPanel(item, calendarItem)
            ) : (
              <div>
                <h4 style={{ 'margin-bottom': item.content ? '10px' : '0px' }}>{item.title}</h4>
                <p>{item.content}</p>
              </div>
            )}
          </el-card>
        </context-menu>
      </el-timeline-item>
    );
  }

  /**
   * 绘制
   *
   * @memberof AppCalendarBase
   */
  render() {
    if (!this.controlIsLoaded) {
      return null;
    }
    const { controlClassNames } = this.renderOptions;
    if (Object.is(this.controlInstance.calendarStyle, 'TIMELINE')) {
      if (this.events.length > 0) {
        return (
          <el-timeline>
            {this.events.map((event: any, index: number) => {
              return this.renderTimeLineItem(event, index);
            })}
          </el-timeline>
        );
      } else {
        return (
          <div>
            <span class='app-data-empty'>{this.$tl(this.controlInstance.getEmptyTextPSLanguageRes()?.lanResTag, this.$t('app.commonwords.nodata'))}</span>
            <span class='quick-toobar'>{this.renderQuickToolbar()}</span>
          </div>
        );
      }
    } else {
      return (
        <div class={{ ...controlClassNames, [this.calendarClass]: true }}>
          <context-menu-container>
            <div class='event-legends'>{this.renderCalendarItems()}</div>
            {this.renderContent()}
          </context-menu-container>
          {this.renderBatchToolbar()}
        </div>
      );
    }
  }
}