from otree.api import Currency as c, currency_range
from ._builtin import Page, WaitPage
from .models import Constants
from otree.forms.widgets import Slider

class TokenAllocation(Page):
    form_model = 'player'

    def get_form_fields(self):
        return ['heads_tokens']

    def get_form_fields_with_widgets(self):
        return {
            'heads_tokens': Slider(attrs={'orient': 'vertical', 'step': 1})
        }

    def vars_for_template(self):
        tails_tokens = self.player.total_tokens - self.player.heads_tokens
        money_value = (100 - self.player.total_tokens) ** 2
        return {
            'total_tokens': self.player.total_tokens,
            'tails_tokens': tails_tokens,
            'money_value': money_value
        }

    def before_next_page(self):
        self.player.tails_tokens = self.player.total_tokens - self.player.heads_tokens

    def js_vars(self):
        return dict(total_tokens=self.player.total_tokens)

    def js_includes(self):
        return ['my_app_name/slider_adjustment.js']  # Replace 'my_app_name' with your app name


class FlipCoin(Page):
    def vars_for_template(self):
        return {
            'outcome': self.player.flip_outcome(),
            'winnings': self.player.calculate_winnings()
        }


class Results(Page):
    pass


page_sequence = [
    TokenAllocation,
    FlipCoin,
    Results
]