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

export default function copilot(colorScheme: ColorScheme) {
    let layer = colorScheme.middle

    let content_width = 264

    let ctaButton = {
        // Copied from welcome screen. FIXME: Move this into a ZDS component
        background: background(layer),
        border: border(layer, "default"),
        cornerRadius: 4,
        margin: {
            top: 4,
            bottom: 4,
            left: 8,
            right: 8,
        },
        padding: {
            top: 3,
            bottom: 3,
            left: 7,
            right: 7,
        },
        ...text(layer, "sans", "default", { size: "sm" }),
        hover: {
            ...text(layer, "sans", "default", { size: "sm" }),
            background: background(layer, "hovered"),
            border: border(layer, "active"),
        },
    }

    return {
        outLinkIcon: {
            icon: svg(
                foreground(layer, "variant"),
                "icons/link_out_12.svg",
                12,
                12
            ),
            container: {
                cornerRadius: 6,
                padding: { left: 6 },
            },
            hover: {
                icon: svg(
                    foreground(layer, "hovered"),
                    "icons/link_out_12.svg",
                    12,
                    12
                ),
            },
        },
        modal: {
            titleText: {
                ...text(layer, "sans", { size: "xs", weight: "bold" }),
            },
            titlebar: {
                background: background(colorScheme.lowest),
                border: border(layer, "active"),
                padding: {
                    top: 4,
                    bottom: 4,
                    left: 8,
                    right: 8,
                },
            },
            container: {
                background: background(colorScheme.lowest),
                padding: {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 8,
                },
            },
            closeIcon: {
                icon: svg(
                    foreground(layer, "variant"),
                    "icons/x_mark_8.svg",
                    8,
                    8
                ),
                container: {
                    cornerRadius: 2,
                    padding: {
                        top: 4,
                        bottom: 4,
                        left: 4,
                        right: 4,
                    },
                    margin: {
                        right: 0,
                    },
                },
                hover: {
                    icon: svg(
                        foreground(layer, "on"),
                        "icons/x_mark_8.svg",
                        8,
                        8
                    ),
                },
                clicked: {
                    icon: svg(
                        foreground(layer, "base"),
                        "icons/x_mark_8.svg",
                        8,
                        8
                    ),
                },
            },
            dimensions: {
                width: 280,
                height: 280,
            },
        },

        auth: {
            content_width,

            ctaButton,

            header: {
                icon: svg(
                    foreground(layer, "default"),
                    "icons/zed_plus_copilot_32.svg",
                    92,
                    32
                ),
                container: {
                    margin: {
                        top: 35,
                        bottom: 5,
                        left: 0,
                        right: 0,
                    },
                },
            },

            prompting: {
                subheading: {
                    ...text(layer, "sans", { size: "xs" }),
                    margin: {
                        top: 6,
                        bottom: 12,
                        left: 0,
                        right: 0,
                    },
                },

                hint: {
                    ...text(layer, "sans", { size: "xs", color: "#838994" }),
                    margin: {
                        top: 6,
                        bottom: 2,
                    },
                },

                deviceCode: {
                    text: text(layer, "mono", { size: "sm" }),
                    cta: {
                        ...ctaButton,
                        background: background(colorScheme.lowest),
                        border: border(colorScheme.lowest, "inverted"),
                        padding: {
                            top: 0,
                            bottom: 0,
                            left: 16,
                            right: 16,
                        },
                        margin: {
                            left: 16,
                            right: 16,
                        },
                    },
                    left: content_width / 2,
                    leftContainer: {
                        padding: {
                            top: 3,
                            bottom: 3,
                            left: 0,
                            right: 6,
                        },
                    },
                    right: (content_width * 1) / 3,
                    rightContainer: {
                        border: border(colorScheme.lowest, "inverted", {
                            bottom: false,
                            right: false,
                            top: false,
                            left: true,
                        }),
                        padding: {
                            top: 3,
                            bottom: 5,
                            left: 8,
                            right: 0,
                        },
                        hover: {
                            border: border(layer, "active", {
                                bottom: false,
                                right: false,
                                top: false,
                                left: true,
                            }),
                        },
                    },
                },
            },

            notAuthorized: {
                subheading: {
                    ...text(layer, "sans", { size: "xs" }),

                    margin: {
                        top: 16,
                        bottom: 16,
                        left: 0,
                        right: 0,
                    },
                },

                warning: {
                    ...text(layer, "sans", {
                        size: "xs",
                        color: foreground(layer, "warning"),
                    }),
                    border: border(layer, "warning"),
                    background: background(layer, "warning"),
                    cornerRadius: 2,
                    padding: {
                        top: 4,
                        left: 4,
                        bottom: 4,
                        right: 4,
                    },
                    margin: {
                        bottom: 16,
                        left: 8,
                        right: 8,
                    },
                },
            },

            authorized: {
                subheading: {
                    ...text(layer, "sans", { size: "xs" }),

                    margin: {
                        top: 16,
                        bottom: 16,
                    },
                },

                hint: {
                    ...text(layer, "sans", { size: "xs", color: "#838994" }),
                    margin: {
                        top: 24,
                        bottom: 4,
                    },
                },
            },
        },
    }
}