import r2wc from "@r2wc/react-to-web-component";
import { Wrapper, Copilot, DashboardWrapper, CopilotButton } from "@onvo-ai/react";
// @ts-ignore
import css from '!!css-loader?{"sourceMap":false,"exportType":"string"}!./sonner.css';

const OnvoCopilot = ({
  userToken,
  baseUrl,
  dashboardId,
  googleMapsApiKey,
  buttonBottomOffset,
  buttonRightOffset,
}: {
  userToken: string;
  baseUrl: string;
  dashboardId: string;
  copilotVariant: "fullscreen" | "copilot";
  iconVariant: "none" | "small" | "large";
  buttonRightOffset: number;
  buttonBottomOffset: number;
  googleMapsApiKey: string;
}) => {
  return (
    <Wrapper token={userToken} baseUrl={baseUrl} googleMapsApiKey={googleMapsApiKey}>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onvo-ai/react@latest/dist/styles.css" />
      <style>{css}</style>
      <DashboardWrapper id={dashboardId}>
        <Copilot
          coupled={false}
        />
        <CopilotButton styles={{ bottom: buttonBottomOffset, right: buttonRightOffset }} />
      </DashboardWrapper>
    </Wrapper>
  );
};

export const CopilotWC = r2wc(OnvoCopilot, {
  shadow: "closed",
  props: {
    userToken: "string",
    baseUrl: "string",
    dashboardId: "string",
    googleMapsApiKey: "string",
    buttonBottomOffset: "number",
    buttonRightOffset: "number",
  },
});