class ColorizingTopic {
    private $btn: JQuery;
    private dialogSelector: string;
    private $row: JQuery;

    constructor(buttonSelector: string) {
        this.$btn = $(buttonSelector);
        this.dialogSelector = '.color-change-dialog';

        this.$btn.on('click', (e) => {
            e.preventDefault();
            this.$row = $(e.target).parent().parent();
            LoaderSFD.Show();
            var id = $(e.target).data("topic-id");

            var colorPicker = new Popup($(this.dialogSelector), 'Wybierz kolor dla tematu.');
            LoaderSFD.Hide();
            $(`${this.dialogSelector} button[data-type="ok"]`).on('click', () => {
                this.request(id);
                colorPicker.Close();
            });
            $(`${this.dialogSelector} button[data-type="cancel"]`).on('click', () => {
                colorPicker.Close();
            });
        });
    }

    private request(id) {
        var color = $(`${this.dialogSelector} #kolor`).val();
        var url = `DzialSetTopicColor/${id}/?color=${color.replace("#", "")}`;
        $.get(url, data => {
            if (data.ok) {
                this.$row.find(".topic-title a h3").css('color', color);
            }
            else {
                alert("Błąd zmiany koloru skontaktuj się z adminem.");
            }
        });
    }
}
$(() => {
    let kolorowanieTematu = new ColorizingTopic('.colorpallete');
});