/* eslint-disable no-param-reassign */
// @ts-check

// BEGIN (write your solution here) (write your solution here)
const render = ({ state, elements }) => {
  state.companies.forEach((company) => {
    const button = document.createElement('button');
    button.classList.add('btn', 'btn-primary');
    button.dataset.id = company.id;
    button.textContent = company.name;
    elements.container.append(button);
  });
};

const renderDescription = ({ state, elements }) => {
  if (elements.container.querySelector('div')) {
    elements.container.querySelector('div').remove();
  }
  const descriptionEl = document.createElement('div');
  const accordion = state.uiState.accordion;
  const visibleEl = accordion.find((item) => item.descriptionVisibility === true);
  if (visibleEl) {
    descriptionEl.textContent = state.companies.find((company) => company.id === visibleEl.id).description;
    elements.container.append(descriptionEl);
  }
};

export default (companies) => {
  const init = () => {
    const accordion = companies.map(({ id, }) => {
      return { id, descriptionVisibility: false };
    });

    const container = document.querySelector('.container');

    const state = {
      companies,
      uiState: {
        accordion,
      },
    };

    return {
      state,
      elements: {
        container,
      },
    };
  };

  const viewData = init();
  render(viewData);

  document.querySelectorAll('.btn').forEach((btn) => {
    btn.addEventListener('click', (e) => {
      const uiState = viewData.state.uiState;
      const targetElId = parseInt(e.target.dataset.id, 10);
      const visibleEl = uiState.accordion.find((item) => item.descriptionVisibility === true);
      if (!visibleEl) {
        uiState.accordion.find((item) => item.id === targetElId).descriptionVisibility = true;
        console.log('Описание создается', uiState.accordion);
      } else {
        visibleEl.descriptionVisibility = false;
        console.log('Описание удаляется', uiState.accordion);
        if (visibleEl.id !== targetElId) {
          uiState.accordion.find((item) => item.id === targetElId).descriptionVisibility = true;
          console.log('Описание переприсваивается', uiState.accordion);
        }
      }
      renderDescription(viewData);
    });
  });
};
// END