import React, { useEffect, useState } from 'react';
import { ConfigurationMap, Environment } from 'rm-sdk';
import { WidgetContentWrapper } from '../WidgetContentWrapper';

import "./styles.scss";

interface IProps {
  environment: Environment | string;
  marketId?: string;

  frontendOperator?: string;
  referrer?: string;
  activateProtectionTitle?: string;
  defaultProtectionAmount?: string;
  defaultDuration?: number;
  inlineMode?: boolean;

  alwaysExpanded?: boolean;
  showPolicyFilterPanel?: boolean;
  width?: string;
  height?: string;
  policyColumnList?: string | string[];
  policyColumnNameList?: string | string[];
  pageSize?: number;
  policyIdList?: string[];
  defaultTab?: string;
}


export function ActivateMarketProtectionWidget({
  defaultProtectionAmount,
  marketId,
  environment,
  frontendOperator,
  referrer,
  activateProtectionTitle,
  defaultDuration,
  inlineMode,
  alwaysExpanded,
  showPolicyFilterPanel,
  width,
  height,
  policyColumnList,
  policyColumnNameList,
  pageSize,
  policyIdList,
  defaultTab,
}: IProps) {
  const [baseUrl, setBaseUrl] = useState("");

  useEffect(() => {
    const envId = typeof(environment) === 'string' ?
      Environment[environment as unknown as number] as unknown as Environment :
      environment;

    setBaseUrl(ConfigurationMap.get(envId)?.uiUrl || "");
  }, [environment]);

  const Content = <>
    <iframe
      className="w-activate-market-protection-widget"
      title="Atomica activate market protection widget"
      frameBorder="0"
      width={width}
      height={height}
      src={`${baseUrl}/activate-protection-internal?showPolicyFilterPanel=${showPolicyFilterPanel
      }&policyColumnList=${policyColumnList ? policyColumnList : ""
      }&policyColumnNameList=${typeof(policyColumnNameList) === 'object' ? policyColumnNameList.join("|") : policyColumnNameList ?? ""
      }&pageSize=${pageSize ?? ""
      }&marketId=${marketId ?? ""
      }&defaultTab=${defaultTab ?? ""
      }&defaultDuration=${defaultDuration ?? ""
      }&defaultProtectionAmount=${defaultProtectionAmount ?? ""
      }&frontend=${frontendOperator ?? ""
      }&referrer=${referrer ?? ""
      }&policyIdList=${policyIdList ? policyIdList : ""
    }`}
    />
  </>;

  return (<WidgetContentWrapper
    title={activateProtectionTitle}
    content={Content}
    inlineMode={inlineMode}
    alwaysExpanded={alwaysExpanded}
  />);
}
