import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"

export default function incomingCallNotification(
    colorScheme: ColorScheme
): Object {
    let layer = colorScheme.middle
    const avatarSize = 48
    return {
        windowHeight: 74,
        windowWidth: 380,
        background: background(layer),
        callerContainer: {
            padding: 12,
        },
        callerAvatar: {
            height: avatarSize,
            width: avatarSize,
            cornerRadius: avatarSize / 2,
        },
        callerMetadata: {
            margin: { left: 10 },
        },
        callerUsername: {
            ...text(layer, "sans", { size: "sm", weight: "bold" }),
            margin: { top: -3 },
        },
        callerMessage: {
            ...text(layer, "sans", "variant", { size: "xs" }),
            margin: { top: -3 },
        },
        worktreeRoots: {
            ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
            margin: { top: -3 },
        },
        buttonWidth: 96,
        acceptButton: {
            background: background(layer, "accent"),
            border: border(layer, { left: true, bottom: true }),
            ...text(layer, "sans", "positive", {
                size: "xs",
                weight: "extra_bold",
            }),
        },
        declineButton: {
            border: border(layer, { left: true }),
            ...text(layer, "sans", "negative", {
                size: "xs",
                weight: "extra_bold",
            }),
        },
    }
}