@page "/citizen/profile"
@using JobsJobsJobs.Client.ViewModels
@inject HttpClient http
@inject AppState state

<h3>Employment Profile</h3>

@if (errorMessage != "")
{
  <p>@errorMessage</p>
}
else if (profileForm != null)
{
<EditForm Model="@profileForm" OnValidSubmit="@SaveProfile">
  <DataAnnotationsValidator />
  <div class="form-row">
    <div class="col col-xs-12 col-sm-12 col-md-4">
      <div class="form-check">
        <InputCheckbox id="seeking" class="form-check-input" @bind-Value="@profileForm.IsSeekingEmployment" />
        <label for="seeking" class="form-check-label">I am currently seeking employment</label>
      </div>
    </div>
    <div class="col col-xs-12 col-sm-12 col-md-8">
      <div class="form-check">
        <InputCheckbox id="isPublic" class="form-check-input" @bind-Value="@profileForm.IsPublic" />
        <label for="isPublic" class="form-check-label">
          Allow my profile to be searched publicly (outside NA Social)
        </label>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col col-xs-12 col-sm-12 col-md-4">
      <div class="form-check">
        <InputCheckbox id="isRemote" class="form-check-input" @bind-Value="@profileForm.RemoteWork" />
        <label for="isRemote" class="form-check-label">I am looking for remote work</label>
      </div>
    </div>
    <div class="col col-xs-12 col-sm-12 col-md-8">
      <div class="form-check">
        <InputCheckbox id="isFull" class="form-check-input" @bind-Value="@profileForm.FullTime" />
        <label for="isFull" class="form-check-label">I am looking for full-time work</label>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col col-xs-12 col-sm-6 col-md-4">
      <div class="form-group">
        <label for="continentId">Continent</label>
        <InputSelect id="continentId" @bind-Value="@profileForm.ContinentId" class="form-control">
          <option>&ndash; Select &ndash;</option>
          @foreach (var (id, name) in continents)
          {
            <option value="@id">@name</option>
          }
        </InputSelect>
        <ValidationMessage For="@(() => profileForm.ContinentId)" />
      </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-8">
      <div class="form-group">
        <label for="region">Region</label>
        <InputText id="region" @bind-Value="@profileForm.Region" class="form-control" />
        <ValidationMessage For="@(() => profileForm.Region)" />
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <div class="form-group">
        <label for="bio">Professional Biography</label>
        <InputTextArea id="bio" @bind-Value="@profileForm.Biography" class="form-control" />
        <ValidationMessage For="@(() => profileForm.Biography)" />
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <label for="experience">Experience</label>
      <InputTextArea id="experience" @bind-Value="@profileForm.Experience" class="form-control" />
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <button type="submit">Save</button>
    </div>
  </div>
</EditForm>
}

@code {

    public JobsJobsJobs.Shared.Profile? profile = null;

    public ProfileForm? profileForm = null;

    private IEnumerable<Continent> continents = Enumerable.Empty<Continent>();

    public string errorMessage = "";

    protected override async Task OnInitializedAsync()
    {
      var continentResult = await ServerApi.AllContinents(http, state);
      if (continentResult.IsOk)
      {
        continents = continentResult.Ok;
      }
      else
      {
        errorMessage = continentResult.Error;
      }

      var result = await ServerApi.RetrieveProfile(http, state);
      if (result.IsOk)
      {
        profile = result.Ok;
        profileForm = (profile == null) ? new ProfileForm() : ProfileForm.FromProfile(profile);
      }
      else
      {
        errorMessage = result.Error;
      }
    }

    public void SaveProfile()
    {
      // TODO: save profile
    }
}