from tkinter import *

root = Tk()
root.geometry("700x300")
root.resizable(0, 0)
root.config(bg="#FAFAD2")
root.title("Cintos de Jiu-Jitsu Brasileiro")

titulo = Label(text="Cintos de Jiu-Jitsu Brasileiro",
               font=("Arial", "28", "bold"), bg="#FAFAD2", fg="black")
titulo.place(relx=0.15, rely=0.05)

var = StringVar()

dropDownList = [
    "Iniciante",
    "Intermediário",
    "Avançado",
    "Pré-cinto preto",
    "Cinto preto (com graus)",
    "Mestres (6º e 7º grau)",
    "Grandes Mestres (8º grau)",
    "Lenda do desporto (9º e 10º grau)"
]

# Criação do Canvas ANTES de chamar qualquer função que o usa
Label(text="Cor do Cinto:",
      font=("Arial", "18", "bold"), bg="#FAFAD2", fg="black").place(relx=0.05, rely=0.55)

canvas = Canvas(root, width=300, height=40, bg="#FAFAD2", highlightthickness=0)
canvas.place(relx=0.4, rely=0.55)

# Função para mostrar o cinto com 1 ou 2 cores
def mostrar_cinto(cor1, cor2=None):
    canvas.delete("all")  # limpa o anterior
    largura = 300
    altura = 40
    if cor2:
        canvas.create_rectangle(0, 0, largura//2, altura, fill=cor1, outline="")
        canvas.create_rectangle(largura//2, 0, largura, altura, fill=cor2, outline="")
    else:
        canvas.create_rectangle(0, 0, largura, altura, fill=cor1, outline="")

# Função que reage à escolha
def app(*args):
    v = var.get()
    if v == "Iniciante":
        mostrar_cinto("white")
    elif v == "Intermediário":
        mostrar_cinto("blue")
    elif v == "Avançado":
        mostrar_cinto("#A020F0")
    elif v == "Pré-cinto preto":
        mostrar_cinto("#964B00")
    elif v == "Cinto preto (com graus)":
        mostrar_cinto("black")
    elif v == "Mestres (6º e 7º grau)":
        mostrar_cinto("red", "black")  # coral vermelho/preto
    elif v == "Grandes Mestres (8º grau)":
        mostrar_cinto("red", "white")  # coral vermelho/branco
    elif v == "Lenda do desporto (9º e 10º grau)":
        mostrar_cinto("red")

# Dropdown
var.trace("w", app)
var.set(dropDownList[0])

dropdown = OptionMenu(root, var, *dropDownList)
dropdown.place(relx=0.13, rely=0.34, relwidth=0.7)
dropdown.config(background='#4682B4', foreground="#F5F5DC", font=("Arial", "18", "bold"))
dropdown["menu"].config(background="#4682B4", foreground="#F5F5DC", font=("Arial", "18", "bold"))

app()

root.mainloop()