/*
Copyright 2026 Lotus Guild

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

import { type FC } from "react";

import { ShareScreenButton } from "../button";
import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
import { useBehavior } from "../useBehavior";
import {
  lotusFrameScreenshareEnabled,
  lotusFrameScreenshareVisible$,
} from "./lotusControls";
import styles from "./LotusFrameScreenshare.module.css";

/**
 * [cinny #43] EC's screenshare button, shown inside the frame when the host
 * can't start a share for us (`lotusFrameScreenshare`). The rest of EC's
 * footer stays hidden behind the host's call bar.
 */
export const LotusFrameScreenshare: FC<{ vm: CallViewModel }> = ({ vm }) => {
  const sharing = useBehavior(vm.sharingScreen$);
  const visible = useBehavior(lotusFrameScreenshareVisible$);
  if (!lotusFrameScreenshareEnabled() || !vm.toggleScreenSharing) return null;
  // Hidden by the host's call policy, but never while a share is live: the
  // user must still be able to stop it.
  if (!visible && !sharing) return null;
  return (
    <div className={styles.floating}>
      <ShareScreenButton
        size="md"
        enabled={sharing}
        onClick={vm.toggleScreenSharing}
        data-testid="lotus_frame_screenshare"
      />
    </div>
  );
};