"""Visualization tools such as piano keys and guitar fretboards."""

# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/03_viz.ipynb.

# %% auto 0
__all__ = ['Piano', 'Guitar']

# %% ../nbs/03_viz.ipynb 3
from fasthtml import *
from fastcore.all import *
from fasthtml.jupyter import render_ft
from IPython.display import HTML

from . import Note, Chord, Scale

render_ft()

# %% ../nbs/03_viz.ipynb 6
class Piano:
    def __ft__(self, highlight: list[Note] = None):
        notes = [str(n) for n in listify(highlight)] if highlight else []
        css = """
    <style>
    .piano { background: #222; padding: 20px 0; position: relative; width: 480px; }
    .white-keys { display: flex; }
    .white-key {
        width: 40px; height: 125px; background: #fff;
        border: 1px solid #000;
        color: #111; font-size: 18px; text-align: center; line-height: 200px; font-family: Arial;
        position: relative; z-index: 1;
    }
    .black-key {
        width: 20px; height: 80px; background: #000; color: #fff;
        border: 1px solid #333; position: absolute; z-index: 2;
        text-align: center; line-height: 100px; font-family: Arial; font-size: 14px;
        left: 0; top: 20px; pointer-events: none;
    }
    .highlight { background: #ff0 !important; color: #000 !important; }
    .highlight-black { background: #ff0 !important; color: #000 !important; }
    </style>
    """
        white_notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C', 'D', 'E', 'F']
        black_keys = [
            (0, ('C#', 'Db')), (1, ('D#', 'Eb')), (3, ('F#', 'Gb')), (4, ('G#', 'Ab')), (5, ('A#', 'Bb')),
            (7, ('C#', 'Db')), (8, ('D#', 'Eb')), (10, ('F#', 'Gb'))
        ]
        html = f'<div class="piano" style="width:{len(white_notes)*40}px">'
        html += '<div class="white-keys">'
        for note in white_notes:
            cls = "white-key"
            if note in notes:
                cls += " highlight"
            html += f'<div class="{cls}">{note}</div>'
        for idx, (sharp, flat) in black_keys:
            cls = "black-key"
            if sharp in notes or flat in notes:
                cls += " highlight-black"
            left = (idx + 1) * 40 - 14
            html += f'<div class="{cls}" style="left:{left}px">{sharp}</div>'
        html += '</div>'
        return HTML(css + html)
    
    def __call__(self, highlight=list[Note]):
        return self.__ft__(highlight)

# %% ../nbs/03_viz.ipynb 20
class Guitar:
    def __ft__(self, highlight: list[Note] = None):
        ...
