import * as React from "react";
import { useContext, useEffect, useRef, useState } from "@wordpress/element";
import { addQueryArgs } from "@wordpress/url";
import { __ } from "@wordpress/i18n";
import snakecaseKeys from "snakecase-keys";
import { pick, pickBy } from "lodash";

import JustwatchContext from "../../context/context";
import { WidgetParams } from "../../types";
import { isImdbId } from "../../context/api";
import { Container, PreviewFrame } from "./WidgetPreview.styles";
import config from "../../context/config";

const WIDGET_MESSAGE_SENDER = "jw_widget";
const WIDGET_MESSAGE_RESIZE = "resize";

export type WidgetPreviewProps = WidgetParams & {
  brandedLink?: boolean;
  previewUrl?: string;
  urlPath?: string;
}

export const WidgetPreview = (props: WidgetPreviewProps): JSX.Element => {
  const contextProps = useContext(JustwatchContext);
  const { locale, previewUrl: settingsPreviewUrl, ...rest } = { ...contextProps, ...props };
  const previewUrl = config.previewUrl || settingsPreviewUrl;

  const widgetKeys = [
    "id", "idType", "objectType", "seasonNumber", "episodeNumber",
    "maxOffers", "offerLabel", "apiKey", "theme", "scale",
    "language", "country", "locale",
    "noOffersMessage", "titleNotFoundMessage"
  ];

  const widgetProps = pick(rest, widgetKeys);
  const { scale = 1, theme, id, language, country } = widgetProps;

  widgetProps.language = language || locale?.substring(0, 2);
  widgetProps.country = country || locale?.substring(3, 5).toUpperCase();

  if (isImdbId(String(id))) {
    widgetProps.idType = "imdb";
  }

  if (!widgetProps.idType) {
    widgetProps.idType = "justwatch";
  }

  const filteredProps = pickBy(widgetProps, (value) => value);
  const widgetParams = { ...snakecaseKeys(filteredProps), theme, scale };
  const widgetUrl = addQueryArgs( previewUrl, widgetParams );

  const [iframeHeight, setIframeHeight] = useState(``);
  const iframeRef = useRef<HTMLIFrameElement | null>(null);

  useEffect(() => {
    const handleResize = (event: MessageEvent) => {
      console.log('handle resize');
      const { type, sender, cssHeight = "" } = event.data;

      if (sender === WIDGET_MESSAGE_SENDER && type === WIDGET_MESSAGE_RESIZE) {
        setIframeHeight(cssHeight);
      }
    };

    window.addEventListener("message", handleResize);

    return () => window.removeEventListener("message", handleResize);
  }, []);

  useEffect(() => {
    window.dispatchEvent(new Event('resize'));
  }, [iframeRef]);

  if (!previewUrl) {
    return <p>Preview URL is missing</p>;
  }

  return (
    <Container>
      <PreviewFrame
        key="iframe"
        ref={iframeRef}
        src={widgetUrl}
        style={{
          width: '100%',
          height: `${iframeHeight}`,
          pointerEvents: 'none',
          border: 'none',
          display: 'block'
        }}
        title={__("JustWatch Widget")}
      />
    </Container>
  );
};

export default WidgetPreview;