import React, { useLayoutEffect } from "react";
import { observer } from "mobx-react-lite";

import { Role, Server } from "revolt-api";
import styled from "styled-components";
import { useLink } from "../../../../lib/context";
import { Button, ButtonItem } from "../../../design";
import { Lock } from "@styled-icons/boxicons-solid";

const Base = styled.div`
    gap: 4px;
    display: flex;
    flex-direction: column;
    overflow: auto;

    button {
        text-align: left;

        gap: 4px;
        display: flex;
        align-items: center;
        flex-direction: row;
    }
`;

const Rank = styled.span`
    font-size: 0.8em;
    color: var(--tertiary-foreground);
`;

const RoleName = styled.span`
    text-overflow: ellipsis;
    overflow: hidden;
`;

const BackBtn = styled.div`
    font-size: 20px;
    border-bottom: 3px solid black;
    text-align: center;
    cursor: pointer;
    padding: 5px 0;
`;

export interface Props {
    /**
     * Server to show role list for
     */
    server: {
        roles: Exclude<Server["roles"], undefined> | null;
        orderedRoles: (Role & { id: string })[];
    };
    /**
     * Whether to show the default role
     */
    showDefault?: boolean;
    /**
     * Currently selected role
     */
    selected: string;
    /**
     * Rank of user looking at the list
     */
    rank?: number;
    /**
     * Select a new role
     */
    onSelect: (value: string) => void;
    /**
     * Callback to create a new role
     */
    onCreateRole?: (callback: (role_id: string) => void) => void;
    serverId?: string;
    serversetting?: boolean;
}

/**
 * Component displaying a list of roles on a server
 */
export const RoleList = observer(
    ({
        server,
        serverId,
        showDefault,
        selected,
        rank,
        onSelect,
        onCreateRole,
        serversetting
    }: Props) => {
        // If a role gets deleted, unselect it immediately.
        const Link = useLink();

        useLayoutEffect(() => {
            if (!server.roles) return;
            if (selected !== "default" && !server.roles[selected]) {
                onSelect("default");
            }
        }, [server.roles, selected]);

        return (
            <Base>
                {
                    serversetting && 
                    <BackBtn>
                        <Link to={`/server/${serverId}/settings/roles`}>
                                {`< Back`}
                        </Link>
                    </BackBtn>
                }
                {server.orderedRoles.map((role) => {
                    const role_rank = role.rank ?? 0;

                    return (
                        <ButtonItem
                            key={role.id}
                            selected={role.id === selected}
                            style={{ color: role.colour! }}
                            onClick={() => onSelect?.(role.id)}>
                            <Rank>{role_rank}</Rank>
                            <RoleName>{role.name}</RoleName>
                            {typeof rank === "number" && role_rank <= rank && (
                                <Lock size={16} />
                            )}
                        </ButtonItem>
                    );
                })}
                {showDefault && (
                    <ButtonItem
                        selected={"default" === selected}
                        onClick={() => onSelect?.("default")}>
                        Default
                    </ButtonItem>
                )}
                {onCreateRole && (
                    <Button
                        palette="plain-secondary"
                        onClick={() => onCreateRole(onSelect)}>
                        Create Role
                    </Button>
                )}
            </Base>
        );
    },
);