@page "/"
@using PoyoLang.Translator
@inject PoyoLangTranslator Translator
@inject IJSRuntime JsRuntime
@inject ISnackbar Snackbar

<PageTitle>PoyoLang Translator</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true" Class="mt-5">PoyoLang Translator</MudText>
<MudText Class="mb-5">Using this website you can freely translate from and to the Poyo language.
    This language only use variations of the word "poyo" (320 of them!) to write sentences using the latin alphabet.
    If you want more information about how this language works and how it is possible to translate to and from it,
    check out the <MudLink href="https://git.ilysix.fr/Eveldee/PoyoLang" Target="_blank">source code</MudLink> of this whole project.</MudText>

<MudToggleGroup T="string" @bind-Value="_sourceLanguage" @bind-Value:after="SourceLanguageUpdated"
                SelectionMode="SelectionMode.SingleSelection" Color="Color.Primary" CheckMark="true" FixedContent="true"
                Class="mb-1" Style="max-width: 30em;">
    <MudToggleItem Value="EnglishSourceLanguage" Text="English" />
    <MudToggleItem Value="PoyoSourceLanguage" Text="Poyo" />
</MudToggleGroup>

@* Wide screen display *@
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
    <MudStack Row="true" StretchItems="StretchItems.StartAndEnd" Class=".d-none .d-md-flex">
        <MudStack>
            <MudTextField @bind-Value="_sourceText" @bind-Value:after="UpdateTranslatedText" DebounceInterval="500"
                          Variant="Variant.Outlined" Label="Source text" Lines="15" />
        </MudStack>

        <MudStack Spacing="1" Row="false">
            <MudTooltip Text="Swap languages">
                <MudIconButton Icon="@Icons.Material.Filled.SwapHoriz" Color="Color.Primary" OnClick="SwapArrowClicked"/>
            </MudTooltip>

            <MudTooltip Text="Copy translation result">
                <MudIconButton Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Primary" OnClick="CopyResultClicked"/>
            </MudTooltip>

            <MudTooltip Text="Clear source text">
                <MudIconButton Icon="@Icons.Material.Filled.Clear" Color="Color.Error" OnClick="ClearButtonClicked"/>
            </MudTooltip>
        </MudStack>

        <MudStack>
            <MudTextField @bind-Value="_translatedText" ReadOnly="true"
                          Variant="Variant.Outlined" Label="Translation result" Lines="15" />
        </MudStack>
    </MudStack>
</MudHidden>

@* Mobile display *@
<MudHidden Breakpoint="Breakpoint.MdAndUp">
    <MudStack Row="false" StretchItems="StretchItems.StartAndEnd">
        <MudStack>
            <MudTextField @bind-Value="_sourceText" @bind-Value:after="UpdateTranslatedText" DebounceInterval="500"
                          Variant="Variant.Outlined" Label="Source text" Lines="15" />
        </MudStack>

        <MudStack Spacing="1" Row="true">
            <MudTooltip Text="Swap languages">
                <MudIconButton Icon="@Icons.Material.Filled.SwapHoriz" Color="Color.Primary" OnClick="SwapArrowClicked"/>
            </MudTooltip>

            <MudTooltip Text="Copy translation result">
                <MudIconButton Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Primary" OnClick="CopyResultClicked"/>
            </MudTooltip>

            <MudTooltip Text="Clear source text">
                <MudIconButton Icon="@Icons.Material.Filled.Clear" Color="Color.Error" OnClick="ClearButtonClicked"/>
            </MudTooltip>
        </MudStack>

        <MudStack>
            <MudTextField @bind-Value="_translatedText" ReadOnly="true"
                          Variant="Variant.Outlined" Label="Translation result" Lines="15" />
        </MudStack>
    </MudStack>
</MudHidden>

@code {

    private const string EnglishSourceLanguage = "English";
    private const string PoyoSourceLanguage = "PoyoLang";

    private string _sourceText = "";
    private string _translatedText = "";
    private string _sourceLanguage = EnglishSourceLanguage;

    protected override void OnInitialized()
    {
        Snackbar.Configuration.PositionClass = Defaults.Classes.Position.BottomCenter;
    }

    private void SourceLanguageUpdated()
    {
        UpdateTranslatedText();
    }

    private void SwapArrowClicked()
    {
        _sourceLanguage = _sourceLanguage switch
        {
            PoyoSourceLanguage => EnglishSourceLanguage,
            _ => PoyoSourceLanguage
        };

        SwapLanguages();
    }

    private void SwapLanguages()
    {
        _sourceText = _translatedText;

        UpdateTranslatedText();
    }

    private void UpdateTranslatedText()
    {
        string result;

        if (_sourceLanguage is PoyoSourceLanguage)
        {
            result = Translator.TranslateFromPoyo(_sourceText);
        }
        else
        {
            result = Translator.TranslateToPoyo(_sourceText);
        }

        _translatedText = result;
    }

    private async Task CopyResultClicked()
    {
        await JsRuntime.InvokeVoidAsync("navigator.clipboard.writeText", _translatedText);

        Snackbar.Add("Translation result copied to clipboard!", Severity.Info);
    }

    private void ClearButtonClicked()
    {
        _sourceText = string.Empty;
        _translatedText = string.Empty;
    }

}