<div>
    <TelerikCheckBox Id="ChildrenCheckbox" @bind-Value="@bShowChildren"></TelerikCheckBox>
    <label for="ChildrenCheckbox">Show children</label>
</div>

<div>
    <TelerikCheckBox Id="PetsCheckbox" @bind-Value="@bShowPets"></TelerikCheckBox>
    <label for="PetsCheckbox">Show pets</label>
</div>

<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top"
                 @ref="@ProcessTabStrip"
                 ActiveTabIndex="@ActiveTabIndex"
                 ActiveTabIndexChanged="@ActiveTabChangedHandler">
    <TabStripTab Title="Client">
        <!-- Client Component-->
    </TabStripTab>
        <TabStripTab Title="Children" Disabled="@(!bShowChildren)">
            <!-- Children Component-->
        </TabStripTab>
        <TabStripTab Title="Pets" Disabled="@(!bShowPets)">
            <!-- Pet Component-->
        </TabStripTab>
    <TabStripTab Title="Locations">
        <!-- Locations Component-->
    </TabStripTab>
</TelerikTabStrip>

<h4>Active Tab Index: @ActiveTabIndex </h4>

@code {
    TelerikTabStrip ProcessTabStrip { get; set; }
    public int ActiveTabIndex { get; set; } = 1;

    public bool bShowChildren { get; set; }
    public bool bShowPets { get; set; }

    public void ActiveTabChangedHandler()
    {
        ActiveTabIndex = ProcessTabStrip.ActiveTabIndex;
    }
}

@page "/"

<div>
    <TelerikCheckBox Id="ChildrenCheckbox" Value="@bShowChildren" ValueChanged="@((bool value) => ValueChangedChildren(value))"></TelerikCheckBox>
    <label for="ChildrenCheckbox">Show children</label>
</div>

<div>
    <TelerikCheckBox Id="PetsCheckbox" Value="@bShowPets" ValueChanged="@((bool value) => ValueChangedPets(value))"></TelerikCheckBox>
    <label for="PetsCheckbox">Show pets</label>
</div>

<TelerikTabStrip ActiveTabIndex="@ActiveTabIndex" ActiveTabIndexChanged="@ActiveTabIndexChanged">
    @foreach (var tab in TabsList)
    {
        <TabStripTab Title="@tab">
            Content 1
        </TabStripTab>
    }
</TelerikTabStrip>

<h6>Active Tab index: @ActiveTabIndex </h6>
<h6>Active Tab title: @ActiveTabTitle </h6>

<p>@bShowChildren - children</p>
<p>@bShowPets - pets</p>

@code {
    public int ActiveTabIndex { get; set; } = 1;
    public string ActiveTabTitle => TabsList[ActiveTabIndex]; // the list of tabs is kept up to date by the app, so we can extract all its metadata from it by its index
    public List<string> TabsList { get; set; } = new List<string>() { "Clients", "Locations" };

    public bool bShowChildren { get; set; }
    public bool bShowPets { get; set; }

    public void ActiveTabIndexChanged(int newTab)
    {
        ActiveTabIndex = newTab;
    }

    public void ValueChangedChildren(bool value)
    {
        bShowChildren = value;
        
        if (value && bShowPets)
        {
            TabsList = new List<string>() { "Clients", "Children", "Pets", "Locations" };
        }
        else if (value)
        {
            TabsList = new List<string>() { "Clients", "Children", "Locations" };
        }
        else if (value == false && bShowPets)
        {
            TabsList = new List<string>() { "Clients", "Pets", "Locations" };
        }
        else
        {
            TabsList = new List<string>() { "Clients", "Locations" };
        }
    }

    public void ValueChangedPets(bool value)
    {
        bShowPets = value;
        
        if (value && bShowChildren)
        {
            TabsList = new List<string>() { "Clients", "Children", "Pets", "Locations" };
        }
        else if (value)
        {
            TabsList = new List<string>() { "Clients", "Pets", "Locations" };
        }
        else if (value == false && bShowChildren)
        {
            TabsList = new List<string>() { "Clients", "Children", "Locations" };
        }
        else
        {
            TabsList = new List<string>() { "Clients", "Locations" };
        }
    }
}