import {__} from "@wordpress/i18n";
import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
import {PanelBody, CheckboxControl, SelectControl, TextControl} from '@wordpress/components';
import React, {useEffect, useState} from "react";
import FullCalendar from '@fullcalendar/react';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import {Stage} from "../interfaces/stage";
import {Event} from "../interfaces/event";

interface EditProps {
  attributes: {
    fair: number,
    selectedStages: string,
    calendarHeight: number,
    minTime: string,
    maxTime: string,
    startDate: string,
    endDate: string,
  };
  setAttributes: (attributes: {
    fair?: number,
    selectedStages?: string,
    calendarHeight?: number,
    minTime?: string,
    maxTime?: string,
    startDate?: string,
    endDate?: string,
  }) => void;
}

console.log('editor/stages-vertikal.block.tsx');

/* Block name */
export const name = `multistage-event-planner/stages-vertical-view`;

/* Block title */
export const title = __('Stages Vertical view', 'multistage-event-planner'); // Updated title

/* Block icon */
export const icon = 'calendar';

/* Block category */
export const category = `widgets`;

/* Block edit function */
export const edit: React.FC<EditProps> = ({attributes, setAttributes}) => {
  const {fair: fairId} = attributes;
  const [fairs, setFairs] = useState([]);
  const [stages, setStages] = useState<Stage[]>([]);
  const [selectedStages, setSelectedStages] = useState<string>('');
  const [startDate, setStartDate] = useState(Date());
  const [endDate, setEndDate] = useState(Date());
  const [randId] = useState(Math.random().toString(36).substring(2, 10));


  const [events, setEvents] = useState<Event[]>([]);
  const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);

  // Fetch fairs
  useEffect(() => {
    fetch('/wp-json/wp/v2/msep-fair')
        .then(response => {
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.json();  // changed to text(), not json()
        })
        .then(data => {
          //console.log('Raw data loaded', data);
          setFairs(data.map((fair) => ({label: fair.title.rendered, value: fair.id})));
        })
        .catch(error => console.error('Error:', error));
  }, []);

  useEffect(() => {
    setSelectedStages(attributes.selectedStages || "");
  }, [attributes.selectedStages]);

  useEffect(() => {
    if (fairId) {
      fetch(`/wp-json/multistage-event-planner/v1/fair/${fairId}`)
        .then(response => response.json())
        .then(data => {
          const stageData = data.stages
            .filter(stage => stage.events && stage.events.length > 0)
            .map(stage => ({
              id: stage.id,
              title: stage.title,
              events: stage.events.map(event => ({
                ...event,
                title: event.shortTitle,
                resourceId: `${stage.id}`
              }))
            }));

          setStages(stageData);

          // Set minTime and maxTime attributes from data
          setAttributes({
            startDate: attributes.startDate === '1976-06-03' ? data.start : attributes.startDate,
            endDate: attributes.endDate === '1976-06-03' ? data.end : attributes.endDate,
            minTime: attributes.minTime === '00:00:00' ? data.minTime : attributes.minTime,
            maxTime: attributes.maxTime === '00:00:00' ? data.maxTime : attributes.maxTime
          });


          setEvents(stageData.flatMap(stage => stage.events));
          setFilteredEvents(stageData.flatMap(stage => stage.events));
        })
        .catch(error => console.error('Error fetching events:', error));
    }
  }, [fairId]);

  const Presenters = ({presenters}) => {
    const presentersByRole = {
      'moderator': [],
      'speaker': [],
    };

    presenters.forEach((presenter) => {
      const {link, linkColor, title, firstname, lastname, id, role} = presenter;
      let presenterComponent;

      switch (link) {
        case 'page':
          presenterComponent =
            <a href="javascript:;" style={{color: linkColor, fontStyle: "normal"}}>
              {`${title} ${firstname} ${lastname}`}
            </a>;
          break;
        case 'modal':
          presenterComponent =
            <a href="javascript:;" data-presenter-id={id} style={{color: linkColor, fontStyle: "normal"}}>
              {`${title} ${firstname} ${lastname}`}
            </a>;
          break;
        default:
          presenterComponent =
            <span>
            {`${title} ${firstname} ${lastname}`}
          </span>;
          break;
      }

      presentersByRole[role].push(presenterComponent);
    });

    return (
      <div className="fc-event-presenters">
        {['moderator', 'speaker'].map(role =>
          presentersByRole[role].length > 0 &&
          <div className={`fc-event-presenter-${role}`}>
            {`${role.charAt(0).toUpperCase() + role.slice(1)}${presentersByRole[role].length > 1 ? 's' : ''}: `}
            {presentersByRole[role]}
          </div>
        )}
      </div>
    );
  };

  function renderEventContent(eventInfo) {
    const {timeText, event} = eventInfo;
    const {langIcon, linkColor, moreLink, presenters, videoUrl} = event.extendedProps;
    return (
      <div style={{margin: '5px 2px'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <div className="fc-event-time">
            {timeText}
          </div>
          <div style={{display: 'flex', gap: '10px', marginRight: '10px'}}>
            {langIcon &&
              <img
                src={langIcon}
                className="fc-event-lang-icon"
                style={{
                  width: 30,
                  height: 'auto'
                }}/>}
          </div>
        </div>
        <div className="msep-event-calendar-title">{event.title}</div>
        <Presenters presenters={presenters}/>
      </div>
    );
  }

  return (
    <>
      <InspectorControls>
        <PanelBody title={__('Event Details', 'multistage-event-planner')}>
          <SelectControl
            label={__('Select Fair', 'multistage-event-planner')}
            value={fairId.toString()} // Convert ID back to string for SelectControl value
            options={[{label: 'Select a Fair', value: ''}, ...fairs]}
            onChange={(newFair) => setAttributes({fair: parseInt(newFair, 10) || 0})} // Parse selected value as integer
          />
          <h3>{__('Select stages', 'multistage-event-planner')}</h3>
          <p>{__('If non are selected, all are displayed', 'multistage-event-planner')}</p>
          {/* Map through the stages and create a checkbox for each one */}
          {stages.map(stage => {
            const stageIdStr = stage.id.toString();
            return (
              <CheckboxControl
                label={stage.title}
                checked={selectedStages.split(',').includes(stageIdStr)}
                onChange={(isChecked) => {
                  const stagesArray = selectedStages.split(',');
                  if (isChecked) {
                    stagesArray.push(stageIdStr);
                  } else {
                    const index = stagesArray.indexOf(stageIdStr);
                    if (index > -1) {
                      stagesArray.splice(index, 1);
                    }
                  }

                  const updatedStagesString = stagesArray.join(',');
                  setSelectedStages(updatedStagesString);
                  setAttributes({selectedStages: updatedStagesString});
                }}
              />
            );
          })}
          <TextControl
              label={__("Start Date", "multistage-event-planner")}
              help={__("Enter the start date in YYYY-MM-DD format.", "multistage-event-planner")}
              value={attributes.startDate}
              onChange={(value) => setAttributes({ startDate: value })}
          />
          <TextControl
              label={__("Min Time", "multistage-event-planner")}
              help={__("Enter the start time in HH:mm:ss format. e.g., '08:00:00'", "multistage-event-planner")}
              value={attributes.minTime} // store entered value in the block attribute
              onChange={(value) => setAttributes({ minTime: value })}
          />
          <TextControl
              label={__("End Date", "multistage-event-planner")}
              help={__("Enter the end date in YYYY-MM-DD format.", "multistage-event-planner")}
              value={attributes.endDate}
              onChange={(value) => setAttributes({ endDate: value })}
          />
          <TextControl
              label={__("Max Time", "multistage-event-planner")}
              help={__("Enter the end time in HH:mm:ss format. e.g., '18:00:00'", "multistage-event-planner")}
              value={attributes.maxTime} // store entered value in the block attribute
              onChange={(value) => setAttributes({ maxTime: value })}
          />
          <TextControl
              label={__("Calendar Height", "multistage-event-planner")}
              help={__("Enter a value in pixels. e.g., '2000'", "multistage-event-planner")} // added help text
              type="number" // to ensure users enter numeric values only
              value={attributes.calendarHeight} // store entered value in the block attribute
              onChange={(value) => setAttributes({ calendarHeight: parseInt(value) })}
          />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        <FullCalendar
          plugins={[resourceTimeGridPlugin]}
          initialView="resourceTimeGridDay"
          height={attributes.calendarHeight}
          resources={
            (selectedStages
                ? stages.filter(stage => selectedStages.split(',').includes(stage.id.toString()))
                : stages
            ).map(stage => {
              return {id: `${stage.id}`, title: `${stage.title}`}
            })
          }
          events={
            (selectedStages
                ? stages.filter(stage => selectedStages.split(',').includes(stage.id.toString()))
                : stages
            ).flatMap(stage => stage.events.map(event => ({...event, id: event.id.toString(), resourceId: `${stage.id}`})))
          }
          eventContent={renderEventContent}
          initialDate={'2024-01-01'}
          //headerToolbar={false} // Disable the header toolbar
          headerToolbar={{
            left: 'title',
            center: '',
            right: 'prev,next'
          }}
          allDaySlot={false} // Optionally hide the all-day slot
          //dayHeaders={false} // Optionally hide day headers
          // Disable interaction features
          selectable={false}
          editable={false}
          eventStartEditable={false}
          eventDurationEditable={false}
          locale={navigator.language} // Use the browser locale
          //locale='en' // Use the browser locale
          slotMinTime={attributes.minTime} // Start of the calendar
          slotMaxTime={attributes.maxTime} // End of the calendar
          expandRows={true}

          // add the below line
          validRange={{
            start: attributes.startDate,
            end: attributes.endDate
          }}

          schedulerLicenseKey='CC-Attribution-NonCommercial-NoDerivatives' // Add this line
        />
      </div>
    </>
  );
};

/* Block save function */
export const save: React.FC<{
  attributes: {
    fair: number,
    selectedStages: string,
    calendarHeight: number,
    minTime: string,
    maxTime: string,
    startDate: string,
    endDate: string,
  }
}> = ({attributes}) => {
  const {fair, selectedStages, calendarHeight, minTime, maxTime, startDate, endDate} = attributes;

  // Continue with your component rendering
  const blockProps = useBlockProps.save();

  return (
    <div {...blockProps} data-fair={fair} data-display-search="false" data-display-filter="false"
         data-display-video="false" data-display-print="false" className="msep-stages-vertical-placeholder"
         data-selected-stages={selectedStages} data-calendar-height={calendarHeight}
         data-min-time={minTime} data-max-time={maxTime} data-start-date={startDate} data-end-date={endDate}>
      {/* Add any additional markup needed here */}
    </div>
  );
};

/* Block styles */
export const styles = [
  {name: 'default', label: __('Default', 'multistage-event-planner'), isDefault: true},
  {name: 'custom', label: __('Custom', 'multistage-event-planner')},
];

/* Block variations * /
export const variations = [
  { name: 'example/fullcalendar-day-view-variant', title: __('FullCalendar Day View Variant', 'multistage-event-planner') },
];
 */