<%
  # API
  my $api = gitprep_api;
  
  # Parameters
  my $user_id = param('user');
  my $project_id = param('project');
  
  # Can write access
  my $session_user_id = $api->session_user_id;
  my $can_write_access = $api->can_write_access($session_user_id, $user_id, $project_id);
  
  my $errors;
  if (lc $self->req->method eq 'post') {
    unless ($can_write_access) {
      Carp::croak("Don't have write access");
    }

    my $op = param('op') // '';

    my $project_row_id = app->dbi->model('project')->select(
      'project.row_id',
      where => {'user.id' => $user_id, 'project.id' => $project_id}
    )->value;
    
    if ($op eq 'create') {
      my $id = param('label-id');
      my $color = param('color');
      
      my $vc = app->vc;
      my $validation = $vc->validation;
      
      if (!length $id) {
        $validation->add_failed(id => "Name can't be blank");
      }
      elsif (length $id > 100) {
        $validation->add_failed(id => "Name is too long");
      }
      else {
        my $label = app->dbi->model('label')->select(
          where => {
            project => $project_row_id,
            id => $id
          }
        )->one;
        
        if ($label) {
          $validation->add_failed(id => "Name has already been taken");
        }
      }
      
      if (!length $color) {
        $validation->add_failed(color => "Color can't be blank");
      }
      
      if ($validation->is_valid) {
        
        my $new_label = {
          id => $id,
          color => $color,
          project => $project_row_id
        };
        
        app->dbi->model('label')->insert($new_label);
        
        $self->redirect_to;
        return;
      }
      else {
        $errors = $validation->messages;
      }
    }
    elsif ($op eq 'api-delete') {
      my $row_id = param('row-id');
      
      app->dbi->model('label')->delete(where => {row_id => $row_id});
      
      $self->render(json => {success => 1});
      return;
    }
    elsif ($op eq 'api-update') {
      my $row_id = param('row-id');
      my $id = param('id');
      my $color = param('color');
      
      my $vc = app->vc;
      my $validation = $vc->validation;
      
      if (!length $id) {
        $validation->add_failed(id => "Name can't be blank");
      }
      elsif (length $id > 100) {
        $validation->add_failed(id => "Name is too long");
      }
      else {
        my $label = app->dbi->model('label')->select(
          where => {
            project => $project_row_id,
            id => $id
          }
        )->one;
        
        if ($label && $id ne $label->{id}) {
          $validation->add_failed(id => "Name has already been taken");
        }
      }
      
      if (!length $color) {
        $validation->add_failed(color => "Color can't be blank");
      }
      
      if ($validation->is_valid) {
        app->dbi->model('label')->update({id => $id, color => $color}, where => {row_id => $row_id});
        
        $self->render(json => {success => 1, id => $id, color => $color});
        return;
      }
      else {
        $self->render(json => {success => 0, message => $validation->messages->[0]});
        return;
      }
    }
  }
  
  my $labels = app->dbi->model('label')->select(
    {__MY__ => '*'},
    where => {'project__user.id' => $user_id, 'project.id' => $project_id},
    append => 'order by id'
  )->all;
  
  # Default color;
  my $default_color = "#" . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255);

  layout 'common', title => "Labels - $user_id/$project_id";
%>

%= javascript begin
  $(document).ready(function () {
    $('.labels-new-btn').on('click', function () {
      $('.labels-create-panel').toggle();
    });

    $('.labels-create-cancel-btn').on('click', function () {
      $('.labels-create-panel').hide();
    });
    
    $('.labels-edit').on('click', function () {
      $(this).closest('li').find('.labels-display-area').hide();
      $(this).closest('li').find('.labels-edit-area').show();
    });

    $('.labels-edit-cancel-btn').on('click', function () {
      $(this).closest('li').find('.labels-display-area').show();
      $(this).closest('li').find('.labels-edit-area').hide();
    });
    
    $('.labels-delete').on('click', function () {
      var li = $(this).closest('li');
      var row_id = li.attr('row-id');
      $.post('<%= url_for %>', {'row-id' : row_id, op : 'api-delete'}, function (result) {
        if (result.success) {
          li.fadeOut();
        }
      });
    });
    
    $('.labels-edit-save-btn').on('click', function () {
      var li = $(this).closest('li');
      var row_id = li.attr('row-id');
      var id = li.find('[name=label-id]').val();
      var color = li.find('[name=color]').val();
      
      $.post('<%= url_for %>', {'row-id' : row_id, op : 'api-update', id : id, color : color}, function (result) {
        
        if (result.success) {
          li.find('.labels-label-id').text(result.id);
          li.find('.labels-tag').css('background', result.color);

          li.find('.labels-display-area').show();
          li.find('.labels-edit-area').hide();
        }
        else {
          li.find('.labels-error').text(result.message);
        }
      });
    });
  });
% end

%= include '/include/header';

<div class="container">
  %= include '/include/errors', errors => $errors;
  % if ($can_write_access) {
    <div class="labels-new-panel">
      <div class="labels-new-btn btn btn-success">
        New label
      </div>
    </div>
  % }
  
  <form class="labels-create-panel" action="<%= url_for %>" method="post" style="display:none">
    <%= hidden_field op => 'create' %>
    <div class="labels-create-left">
      <%= input_tag 'label-id', class => 'labels-create-label-id' %>
      <div class="labels-create-label-color-area">
        <%= input_tag 'color' => $default_color, class => 'labels-create-label-color' %>
        <div class ="labels-create-label-color-palette" style="background:<%= $default_color %>;"></div>
        <div class="error"></div>
      </div>
    </div>
    <div class="labels-create-right">
      <div class="labels-create-cancel-btn btn">
        Cancel
      </div>
      <input type="submit" value="Create label" class="labels-create-create-btn btn btn-success">
    </div>
  </form>
  <ul class="labels">
    <li><%= @$labels %> labels</li>
    % for my $label (@$labels) {
      <li row-id="<%= $label->{row_id} %>">
        <div class="labels-display-area">
          <div class="labels-left">
            <div class="labels-tag" style="background:<%= $label->{color} %>;">
              <i class="icon icon-tag"></i>
              <span class="labels-label-id"><%= $label->{id} %></span>
            </div>
          </div>
          <div class="labels-right">
            % if ($can_write_access) {
              <div class="labels-edit">
                <a href="javascript:void(0)"><i class="icon icon-edit"></i> Edit</a>
              </div>
              <div class="labels-delete">
                <a href="javascript:void(0)"><i class="icon icon-remove"></i> Delete</a>
              </div>
            % }
          </div>
        </div>
        <div class="labels-edit-area" style="display:none">
          <div class="labels-left">
            <%= input_tag 'label-id' => $label->{id}, class => 'labels-edit-label-id' %>
            <div class="labels-edit-label-color-area">
              <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>
              <div class ="labels-edit-label-color-palette" style="background:<%= $label->{color} %>;"></div>
            </div>
            <div class="labels-error" style="display:inline-block;color:red;"></div>
          </div>
          <div class="labels-right">
            <div class="labels-edit-cancel-btn btn">
              Cancel
            </div>
            <div class="labels-edit-save-btn btn btn-success">
              Save changes
            </div>
          </div>
        </div>
      </li>
    % }
  </ul>
</div>

%= include '/include/footer';