<div id="root"></div>

// Создаем контекст компании
const CompanyContext = React.createContext({
  companies: [],
  currentCompany: {},
  setCompany: () => {},
});

// Массив компаний для переключения
const companies = [
  {
    id: 1,
    name: 'Google',
    address: {
      street: '1600 Amphitheatre Parkway',
      city: 'Mountain View',
      post: 'CA 94043',
      country: 'USA',
    },
  },
  {
    id: 2,
    name: 'Microsoft',
    address: {
      street: 'One Microsoft Way',
      city: 'Redmond',
      post: 'WA 98052',
      country: 'USA',
    },
  },
];

// Компонент для отображения названия компании
class CompanyNameComponent extends React.Component {
  static contextType = CompanyContext;
  render() {
    const { currentCompany } = this.context;
    return <h1>{currentCompany.name}</h1>;
  }
}

// Компонент для отображения адреса компании
class CompanyAddressComponent extends React.Component {
  static contextType = CompanyContext;
  render() {
    const { currentCompany } = this.context;
    const { street, city, post, country } = currentCompany.address;
    return (
      <p>
        {street}
        <br />
        {city}, {post}
        <br />
        {country}
      </p>
    );
  }
}

// Компонент для переключения компании
class CompanySwitcher extends React.Component {
  static contextType = CompanyContext;

  render() {
    const { companies, setCompany, currentCompany } = this.context;
    return (
      <div>
        <h3>Switch Company:</h3>
        {companies.map((company) => (
          <button
            key={company.id}
            onClick={() => setCompany(company)}
            disabled={company.name === currentCompany.name}
          >
            {company.name}
          </button>
        ))}
      </div>
    );
  }
}

// Главный компонент приложения
class App extends React.Component {
  constructor(props) {
    super(props);
    // Изначально выбираем первую компанию
    this.state = { currentCompany: companies[0] };
  }

  setCompany = (company) => {
    // Меняем компанию в состоянии
    this.setState({ currentCompany: company });
  };

  render() {
    const { currentCompany } = this.state;
    return (
      <CompanyContext.Provider
        value={{ companies, currentCompany, setCompany: this.setCompany }}
      >
        <CompanyNameComponent />
        <CompanyAddressComponent />
        <CompanySwitcher />
      </CompanyContext.Provider>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);