@page "/contacts"
@inject NavigationManager NavigationManager
@inject HttpClient Http
<h3>Contacts</h3>

<SfGrid DataSource="GridData" AllowFiltering="true" Toolbar="@(new List<string>() {"Search"})">
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
    <GridColumns>
        <GridColumn Width="60">
            <Template>
                @{
                    var contact = context as Contact;
                    <SfButton CssClass="e-inherit" IconCss="e-icons e-edit"
                     OnClick="@(() => EditContact(contact!.Id))"></SfButton>
                }
            </Template>
        </GridColumn>
        <GridColumn Width="60">
            <Template>
                @{
                    var contact = context as Contact;
                    <SfButton CssClass="e-inherit" IconCss="e-icons e-delete"
                          OnClick="@(() => DeleteContact(contact!))"></SfButton>
                }
            </Template>
        </GridColumn>
        <GridColumn Field="FirstName" HeaderText="First Name"></GridColumn>
        <GridColumn Field="LastName" HeaderText="Last Name"></GridColumn>
        <GridColumn Field="NickName" HeaderText="Nick Name"></GridColumn>
        <GridColumn Field="Place" HeaderText="Place"></GridColumn>
        <GridColumn Field="DateOfBirth" HeaderText="Date Of Birth" Format="yyyy-MM-dd"></GridColumn>
    </GridColumns>

</SfGrid>

<p>
    <SfButton IsPrimary="true" Content="Create New Contact" OnClick="CreateContact" />
</p>

<SfDialog Width="335px" IsModal="true" @bind-Visible="showDeleteDialog">
    <DialogTemplates>
        <Header>Are you sure?</Header>
        <Content>
            <p>Do you really want to delete @contactToDelete!.NickName</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Yep." IsPrimary="false" OnClick="ConfirmDeleteContact"></DialogButton>
        <DialogButton Content="Nope." IsPrimary="true" OnClick="CancelDeleteContact"></DialogButton>
    </DialogButtons>
    <DialogAnimationSettings Effect="@DialogEffect.Zoom" ></DialogAnimationSettings>
</SfDialog>

@code {
    Contact? contactToDelete;
    public List<Contact> GridData { get; set; } = new List<Contact>
    {
        //new Contact
        //{
        //    Id = 1,
        //    FirstName = "Peter",
        //    LastName = "Parker",
        //    NickName = "Spider-Man",
        //    Place = "New York City",
        //    DateOfBirth = new DateTime(2001, 8, 1),
        //    DateCreated = DateTime.Now
        //},
        //new Contact
        //{
        //    Id = 1,
        //    FirstName = "Tony",
        //    LastName = "Stark",
        //    NickName = "Iron Man",
        //    Place = "Malibu",
        //    DateOfBirth = new DateTime(1970, 5, 29),
        //    DateCreated = DateTime.Now
        //},
        //new Contact
        //{
        //    Id = 1,
        //    FirstName = "Bruce",
        //    LastName = "Wayne",
        //    NickName = "Batman",
        //    Place = "Gotham City",
        //    DateOfBirth = new DateTime(1915, 4, 7),
        //    DateCreated = DateTime.Now
        //}
    };

    bool showDeleteDialog = false;

    protected override async Task OnInitializedAsync()
    {
        var result = await Http.GetFromJsonAsync<List<Contact>>("api/contacts");
        if(result is not null)
        {
            GridData = result;
        }
    }

    void EditContact(int Id)
    {
        NavigationManager.NavigateTo($"contacts/edit/{Id}");
    }

    void CreateContact()
    {
        NavigationManager.NavigateTo($"contacts/new");
    }

    void DeleteContact(Contact contact)
    {
        contactToDelete = contact;
        showDeleteDialog = true;
    }

    void CancelDeleteContact()
    {
        showDeleteDialog = false;
    }

    async Task ConfirmDeleteContact()
    {
        if(contactToDelete is null)
        {
            return;
        }

        showDeleteDialog = false;
        var result = await Http.DeleteAsync($"api/contacts/{contactToDelete.Id}");
        if (result.IsSuccessStatusCode)
        {
            var jsonResult = await result.Content.ReadFromJsonAsync<List<Contact>>();
            if(jsonResult is not null)
            {
                GridData = jsonResult;
            }
        }
    }
}