<div id='root'></div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --menu-justify-content: center; /* Default value */
}

body {
  font-family: Arial, sans-serif;
  background-color: #1a1d1d;
  padding: 20px;
  font-size: 0.875rem;
  color: #333;
}

.container {
  background-color: #eee;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 30rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.controls-container {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

@media screen and (max-width: 600px) {
  body {
    padding: 5px;
  }
  .container {
    width: 100%;
  }
}

.lang-demo {
  border: 2px solid #ddd;
  margin-block-start: 20px;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  background-color: #fff;
}

.lang-demo.English {
  direction: ltr;
  text-align: left;
}

.lang-demo.Arabic {
  direction: rtl;
  text-align: right;
}

.lang-demo.Japanese {
  writing-mode: vertical-rl;
}

.lang-demo.Mongolian {
  writing-mode: vertical-lr;
}


.lang-demo form {
  writing-mode: horizontal-tb;
  display: flex;
  flex-direction: column;
}

.lang-demo form label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}

input[type="text"],
input[type="email"] {
  background-color: #fff;
  flex-grow: 1;
  margin-inline-start: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding-block-start: 8px;
  padding-inline-end: 10px;
  padding-block-end: 8px;
  padding-inline-start: 10px;
  width: 100%; /* Full width */
}

select {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
}

.navigation-menu {
  font-size: 1.2em;
  margin-block-start: 20px;
}

ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  display: flex;
  justify-content: var(--menu-justify-content);
}

ul li {
  margin-inline: 10px;
}

ul li a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  border: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

ul li a:hover {
  color: #0275d8;
  border-color: #0275d8;
}

form {
  margin-block-start: 20px;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px 15px;
  margin: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

import React, {
  useState,
  useRef,
  useEffect,
  useReducer
} from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";

const languageInfo = {
  English: {
    writingMode: "horizontal-tb",
    textDirection: "ltr",
    justifyContent: "center",
    translations: {
      sampleTextBlock: "Sample Text Block",
      textBlockContent:
        "This is a sample text block to showcase text direction and alignment. The appearance of this text will change based on the selected language.",
      navigationMenu: "Navigation Menu",
      home: "Home",
      about: "About",
      services: "Services",
      contact: "Contact",
      sampleForm: "Sample Form",
      name: "Name",
      email: "Email",
      submit: "Submit"
    }
  },
  Arabic: {
    writingMode: "horizontal-tb",
    textDirection: "rtl",
    justifyContent: "center",
    translations: {
      sampleTextBlock: "كتلة نص العينة",
      textBlockContent:
        "هذا نموذج لكتلة نصية لعرض اتجاه النص ومحاذاته. سيتغير مظهر هذا النص بناءً على اللغة المحددة.",
      navigationMenu: "قائمة التنقل",
      home: "الرئيسية",
      about: "حول",
      services: "الخدمات",
      contact: "اتصل",
      sampleForm: "نموذج نموذجي",
      name: "اسم",
      email: "البريد الإلكتروني",
      submit: "إرسال"
    }
  },
  Japanese: {
    writingMode: "vertical-rl",
    textDirection: "ltr",
    justifyContent: "start",
    translations: {
      sampleTextBlock: "サンプルテキストブロック",
      textBlockContent:
        "これは、テキストの方向と配置を示すサンプル テキスト ブロックです。このテキストの外観は、選択した言語に基づいて変わります。",
      navigationMenu: "ナビゲーションメニュー",
      home: "ホーム",
      about: "約",
      services: "サービス",
      contact: "連絡先",
      sampleForm: "サンプルフォーム",
      name: "名前",
      email: "Eメール",
      submit: "提出する"
    }
  },
  Mongolian: {
    writingMode: "vertical-lr",
    textDirection: "ltr",
    justifyContent: "start",
    translations: {
      sampleTextBlock: "Жишээ текстийн блок",
      textBlockContent:
        "Энэ бол текстийн чиглэл, зэрэгцүүлэлтийг харуулах жишээ текст блок юм. Сонгосон хэл дээр үндэслэн энэ текстийн харагдах байдал өөрчлөгдөнө.",
      navigationMenu: "Зааврын цэс",
      home: "Гэр",
      about: "Тухай",
      services: "Үйлчилгээ",
      contact: "Холбоо барих",
      sampleForm: "Жишээ маягт",
      name: "Нэр",
      email: "И-мэйл",
      submit: "Илгээх"
    }
  }
};

function App() {
  const [language, setLanguage] = useState("English"); // Default language
  const [showInEnglish, setShowInEnglish] = useState(true);

  const currentTranslations = showInEnglish
    ? languageInfo.English.translations
    : languageInfo[language].translations;

  const handleLanguageChange = (event) => {
    const selectedLanguage = event.target.value;
    setLanguage(selectedLanguage);
    const langProps = languageInfo[selectedLanguage];
    const rootStyle = document.documentElement.style;
    rootStyle.setProperty("--menu-justify-content", langProps.justifyContent);
  };

  const handleCheckboxChange = (event) => {
    setShowInEnglish(event.target.checked);
  };
  
  return (
    <div className="container">
      <div className="controls-container">
        <select onChange={handleLanguageChange}>
          <option value="English">English H-LTR</option>
          <option value="Arabic">Arabic H-RTL</option>
          <option value="Japanese">Japanese V-RTL</option>
          <option value="Mongolian">Mongolian V-LTR</option>
        </select>
        <label>
          Show in English
          <input
            type="checkbox"
            checked={showInEnglish}
            onChange={handleCheckboxChange}
          />
        </label>
      </div>

      <div className={`lang-demo ${language}`}>
        <h2>{currentTranslations.sampleTextBlock}</h2>
        <p>{currentTranslations.textBlockContent}</p>

        <h2 className="navigation-menu">
          {currentTranslations.navigationMenu}
        </h2>
        <ul>
          <li>{currentTranslations.home}</li>
          <li>{currentTranslations.about}</li>
          <li>{currentTranslations.services}</li>
          <li>{currentTranslations.contact}</li>
        </ul>

        <h2>{currentTranslations.sampleForm}</h2>
        <form>
          <label>
            {currentTranslations.name}:
            <input type="text" name="name" />
          </label>
          <label>
            {currentTranslations.email}:
            <input type="email" name="email" />
          </label>
          <button type="submit">{currentTranslations.submit}</button>
        </form>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));