"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusLayout = exports.FocusLayoutContainerNoParticipants = exports.FocusLayoutContainer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ParticipantTile_1 = require("./ParticipantTile");
const utils_1 = require("./utils");
/**
 * The `FocusLayoutContainer` is a layout component that expects two children:
 * A small side component: In a video conference, this is usually a carousel of participants
 * who are not in focus. And a larger main component to display the focused participant.
 * For example, with the `FocusLayout` component.
 */
function FocusLayoutContainer(props) {
    const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { children: props.children }));
}
exports.FocusLayoutContainer = FocusLayoutContainer;
function FocusLayoutContainerNoParticipants(props) {
    const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { style: { gridTemplateColumns: 'none' } }, { children: props.children })));
}
exports.FocusLayoutContainerNoParticipants = FocusLayoutContainerNoParticipants;
/**
 * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
 */
function FocusLayout(_a) {
    var { trackRef } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef"]);
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    return (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, Object.assign({ trackRef: trackRef }, htmlProps));
}
exports.FocusLayout = FocusLayout;
