from nicegui import context, ui

from drag_draft import QUEENS_FILE, parse_args


def run_draft() -> None:
    args = parse_args()
    queens_file = args.season_dir / QUEENS_FILE
    queens = queens_file.read_text().strip().split("\n")

    ui.label("Make your picks")
    player_name = ui.input("Player name", placeholder="Enter your name")

    with ui.row():
        with ui.column().classes("sortable"):
            for queen in queens:
                with ui.card().classes("cursor-grab"):
                    ui.label(queen)

    def drop_queen(e) -> None:
        # Move in UI
        print(e)
        context.client.elements[e.args["id"]].move(target_index=e.args["new_index"])
        queens.insert(e.args["new_index"], queens.pop(e.args["old_index"]))
        print(
            f'Moved queen {queens[e.args["new_index"]]} to index {e.args["new_index"]}'
        )

    ui.on(
        "item-drop",
        drop_queen,
    )

    def save_picks() -> None:
        print(f"Player {player_name.value} picked:")
        print(context.client.elements)
        (args.season_dir / f"picks-{player_name.value}.txt").write_text(
            "\n".join(queen for queen in queens)
        )
        print("Picks saved!")

    ui.button("Save").on_click(save_picks)

    ui.add_body_html(
        r"""
        <script type="module">
        import 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.6/Sortable.min.js';
        document.addEventListener('DOMContentLoaded', () => {
            Sortable.create(document.querySelector('.sortable'), {
                animation: 150,
                ghostClass: 'opacity-50',
                onEnd: (evt) => emitEvent("item-drop", {id: parseInt(evt.item.id.slice(1)), new_index: evt.newIndex, old_index: evt.oldIndex}),
            });
        });
        </script>
    """
    )


run_draft()

ui.run()