import React, { useState } from "react";
import styled from "styled-components";
import { Props as RoleListProps, RoleList } from "./RoleList";

const Base = styled.div`
    gap: 24px;
    padding: 8px;
    display: flex;
    overflow: visible !important;

    > :nth-child(1) {
        width: 120px;
        flex-shrink: 0;
    }

    > :nth-child(2) {
        flex-grow: 1;
    }
`;

const Line = styled.div`
    z-index: 1000;
    margin-top: -60px;
    margin-bottom: -120px;
    width: 10px;
    box-shadow: rgb(0 0 0 / 30%) 20px 20px 3px 16px, rgb(0 0 0 / 20%) -35px 0px 10px 0px;
    height: calc(100% + 76px);

    // @media screen and (max-width:1200px) {
    //     width: 1%;
    //     box-shadow: rgb(0 0 0 / 30%) 20px 0px 0px 19px, rgb(0 0 0 / 20%) -20px 0px 18px 0px;
    // }
`;

export type Props = Omit<
    RoleListProps,
    "server" | "showDefault" | "selected" | "onSelect"
> & {
    editor: React.FC<{ selected: string }>;
    server?: RoleListProps["server"];
    channel?: {
        server?: RoleListProps["server"];
    };
    serverId?: string;
    serversetting?: boolean;
};

/**
 * Component to add a role list sidebar to a role editor
 */
export function PermissionsLayout({
    channel,
    server: givenServer,
    serverId,
    editor: Editor,
    serversetting,
    ...listProps
}: Props) {
    const [selected, setSelected] = useState("default");

    const editor = <Editor selected={selected} />;
    const server = givenServer ?? channel?.server;

    return server ? (
        <Base>
            <RoleList
                showDefault
                server={server}
                serverId={serverId}
                selected={selected}
                onSelect={setSelected}
                serversetting={serversetting}
                {...listProps}
            />
            <Line />
            {editor}
        </Base>
    ) : (
        editor
    );
}