@inject IJSRuntime JSRuntime

<Flex Vertical Gap="FlexGap.Large">
    @if (!Providers.Any())
    {
        <Empty Description="@("No external authentication providers have been configured")" />
    }

    <Collapse>
        @foreach (var externalProvider in Providers)
        {
            <Panel Header="@externalProvider.Name">
                <ExtraTemplate>
                    <Button Type="ButtonType.Text" Icon="@IconType.Outline.Close" Size="ButtonSize.Small" Danger OnClick="() => Remove(externalProvider)"/>
                </ExtraTemplate>
                <ChildContent>
                    <Form Model="externalProvider" Layout="FormLayout.Vertical">
                        <FormItem Label="Name">
                            <Space Style="width: 100%">
                                <SpaceItem Style="width: 100%">
                                    <Input @bind-Value="context.Name" BindOnInput/>
                                </SpaceItem>

                                <SpaceItem>
                                    <Space>
                                        @if (Templates.Any())
                                        {
                                            <SpaceItem>
                                                <Dropdown>
                                                    <Overlay>
                                                        <Menu>
                                                            @foreach (var template in Templates)
                                                            {
                                                                <MenuItem OnClick="() => UseTemplate(externalProvider, template)">
                                                                    @template.Name
                                                                </MenuItem>
                                                            }
                                                        </Menu>
                                                    </Overlay>
                                                    <ChildContent>
                                                        <Button>Templates</Button>
                                                    </ChildContent>
                                                </Dropdown>
                                            </SpaceItem>
                                        }

                                        @if (!String.IsNullOrWhiteSpace(externalProvider.Documentation))
                                        {
                                            <SpaceItem>
                                                <Tooltip Title="Documentation">
                                                    <Button Type="ButtonType.Text" Icon="@IconType.Outline.Question" OnClick="() => OpenDocumentation(externalProvider)"/>
                                                </Tooltip>
                                            </SpaceItem>
                                        }
                                    </Space>
                                </SpaceItem>
                            </Space>
                        </FormItem>

                        <FormItem Label="Color">
                            <Input @bind-Value="context.Color" />
                        </FormItem>

                        <FormItem Label="Icon">
                            <Input @bind-Value="context.Icon" />
                        </FormItem>

                        <FormItem Label="Type">
                            <EnumSelect TEnum="AuthenticationProviderType" @bind-Value="context.Type"/>
                        </FormItem>

                        <FormItem Label="Client ID">
                            <Input @bind-Value="context.ClientId"/>
                        </FormItem>

                        <FormItem Label="Client Secret">
                            <InputPassword @bind-Value="context.ClientSecret"/>
                        </FormItem>

                        <FormItem Label="Authority">
                            <Input @bind-Value="context.Authority"/>
                        </FormItem>

                        <FormItem Label="Authorization Endpoint">
                            <Input @bind-Value="context.AuthorizationEndpoint"/>
                        </FormItem>

                        <FormItem Label="Token Endpoint">
                            <Input @bind-Value="context.TokenEndpoint"/>
                        </FormItem>

                        <FormItem Label="User Info Endpoint">
                            <Input @bind-Value="context.UserInfoEndpoint"/>
                        </FormItem>

                        <FormItem Label="Scopes">
                            <ScopesEditor @bind-Values="context.Scopes"/>
                        </FormItem>

                        <FormItem Label="Claim Mappings">
                            <ClaimMappingsEditor @bind-Values="context.ClaimMappings"/>
                        </FormItem>
                    </Form>
                </ChildContent>
            </Panel>
        }
    </Collapse>
    
    <Flex Justify="FlexJustify.Center">
        <Button OnClick="Add" Type="ButtonType.Primary">Add Provider</Button>
    </Flex>
</Flex>

@code {
    [Parameter] public IEnumerable<AuthenticationProvider> Values { get; set; }
    [Parameter] public EventCallback<IEnumerable<AuthenticationProvider>> ValuesChanged { get; set; }

    List<AuthenticationProvider> Templates = new();
    List<AuthenticationProvider> Providers = new();

    AuthenticationProvider SelectedTemplate;

    protected override async Task OnInitializedAsync()
    {
        Templates = await AuthenticationService.GetAuthenticationProviderTemplatesAsync();
    }

    protected override void OnParametersSet()
    {
        Providers = Values.ToList();
    }

    void OpenDocumentation(AuthenticationProvider authenticationProvider)
    {
        JSRuntime.InvokeVoidAsync("open", authenticationProvider.Documentation, "_blank");
    }

    async Task Add()
    {
        Providers.Add(new AuthenticationProvider());

        if (ValuesChanged.HasDelegate)
            await ValuesChanged.InvokeAsync(Providers);
    }

    async Task Remove(AuthenticationProvider authenticationProvider)
    {
        Providers.Remove(authenticationProvider);

        if (ValuesChanged.HasDelegate)
            await ValuesChanged.InvokeAsync(Providers);
    }

    async Task UseTemplate(AuthenticationProvider authenticationProvider, AuthenticationProvider template)
    {
        authenticationProvider.Authority = template.Authority;
        authenticationProvider.AuthorizationEndpoint = template.AuthorizationEndpoint;
        authenticationProvider.ClaimMappings = template.ClaimMappings;
        authenticationProvider.ClientId = template.ClientId;
        authenticationProvider.ClientSecret = template.ClientSecret;
        authenticationProvider.Color = template.Color;
        authenticationProvider.Documentation = template.Documentation;
        authenticationProvider.Icon = template.Icon;
        authenticationProvider.Name = template.Name;
        authenticationProvider.Scopes = template.Scopes;
        authenticationProvider.TokenEndpoint = template.TokenEndpoint;
        authenticationProvider.UserInfoEndpoint = template.UserInfoEndpoint;

        await InvokeAsync(StateHasChanged);
    }
}