<%= pb_rails("checkbox" , props: {
  input_options: { tabindex: 0 },
  text: "Checkbox Label",
  value: "checkbox-value",
  name: "checkbox-name"
}) %>

<%= pb_rails("checkbox" , props: {
  text: "Checked Checkbox",
  value: "checkbox-value",
  checked: true,
  name: "checkbox-name"
}) %>

<%= pb_rails("checkbox", props: {text: "Custom Checkbox"}) do%>
    <input type="checkbox" name="custom-name" value="custom-value"/>
<% end %>

<%= pb_rails("checkbox" , props: {
  error: true,
  text: "Checkbox Label",
  value: "checkbox-value",
  name: "checkbox-name"
}) %>

<%= pb_rails("checkbox" , props: {
  text: "Checkbox with Options",
  input_options: {
    id: "checkbox-id",
    name: "checkbox-name",
    value: "checkbox-value",
    class: "checkbox-class",
    checked: true
  }
}) %>

<% checkboxes = [
  { name: 'Coffee', id: 'coffee', checked: false },
  { name: 'Ice Cream', id: 'ice-cream', checked: false },
  { name: 'Chocolate', id: 'chocolate', checked: true }
] %>

<%= pb_rails("table", props: { container: false, size: "md" }) do %>
  <thead>
    <tr>
      <th>
        <%= pb_rails("checkbox", props: {
          checked: true,
          text: "Uncheck All",
          value: "checkbox-value",
          name: "main-checkbox",
          indeterminate: true,
          id: "indeterminate-checkbox"
        }) %>
      </th>
    </tr>
  </thead>

  <tbody>
    <% checkboxes.each do |checkbox| %>
      <tr>
        <td>
          <%= pb_rails("checkbox", props: {
            checked: checkbox[:checked],
            text: checkbox[:name],
            value: checkbox[:id],
            name: "#{checkbox[:id]}-indeterminate-checkbox",
            id: "#{checkbox[:id]}-indeterminate-checkbox",
          }) %>
        </td>
      </tr>
    <% end %>
  </tbody>
<% end %>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');

    const updateMainCheckbox = () => {
      // Count the number of checked child checkboxes
      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
      // Determine if the main checkbox should be in an indeterminate state
      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
      
      // Set the main checkbox states
      mainCheckbox.indeterminate = indeterminate;
      mainCheckbox.checked = checkedCount > 0;

      // Determine the main checkbox label based on the number of checked checkboxes
      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';

      // Determine the icon class to add and remove based on the number of checked checkboxes
      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';

      // Update main checkbox label
      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
      
      // Add and remove the icon class to the main checkbox wrapper
      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
      
      // Toggle the visibility of the checkbox icon based on the indeterminate state
      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
    };

    mainCheckbox.addEventListener('change', function() {
      childCheckboxes.forEach(cb => cb.checked = this.checked);
      updateMainCheckbox();
    });

    childCheckboxes.forEach(cb => {
      cb.addEventListener('change', updateMainCheckbox);
    });
  });
</script>

<%= pb_rails("flex", props: {orientation: "column"}) do %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("checkbox" , props: {
            input_options: { tabindex: 0 },
            margin_bottom: "xs",
            text: "Disabled unchecked",
            value: "checkbox-value",
            disabled: true,
            name: "checkbox-name"
        }) %>
    <% end %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("checkbox" , props: {
            input_options: { tabindex: 0 },
            text: "Disabled checked",
            value: "checkbox-value",
            disabled: true,
            checked: true,
            name: "checkbox-name"
        }) %>
    <% end %>
<% end %>