import React from 'react';
import { Builders } from 'q3-ui-forms';
import { castToBoolean } from 'q3-ui-forms/lib/helpers';
import { compact, map } from 'lodash';
import SystemPageSub from '../../components/SystemPageSub';
import useDomainContext from '../../hooks/useDomainContext';

const langCodes = [
  { code: 'ab', name: 'Abkhazian' },
  { code: 'aa', name: 'Afar' },
  { code: 'af', name: 'Afrikaans' },
  { code: 'ak', name: 'Akan' },
  { code: 'sq', name: 'Albanian' },
  { code: 'am', name: 'Amharic' },
  { code: 'ar', name: 'Arabic' },
  { code: 'an', name: 'Aragonese' },
  { code: 'hy', name: 'Armenian' },
  { code: 'as', name: 'Assamese' },
  { code: 'av', name: 'Avaric' },
  { code: 'ae', name: 'Avestan' },
  { code: 'ay', name: 'Aymara' },
  { code: 'az', name: 'Azerbaijani' },
  { code: 'bm', name: 'Bambara' },
  { code: 'ba', name: 'Bashkir' },
  { code: 'eu', name: 'Basque' },
  { code: 'be', name: 'Belarusian' },
  { code: 'bn', name: 'Bengali' },
  { code: 'bh', name: 'Bihari languages' },
  { code: 'bi', name: 'Bislama' },
  { code: 'bs', name: 'Bosnian' },
  { code: 'br', name: 'Breton' },
  { code: 'bg', name: 'Bulgarian' },
  { code: 'my', name: 'Burmese' },
  { code: 'ca', name: 'Catalan, Valencian' },
  { code: 'km', name: 'Central Khmer' },
  { code: 'ch', name: 'Chamorro' },
  { code: 'ce', name: 'Chechen' },
  { code: 'ny', name: 'Chichewa, Chewa, Nyanja' },
  { code: 'zh', name: 'Chinese' },
  {
    code: 'cu',
    name: 'Church Slavonic, Old Bulgarian, Old Church Slavonic',
  },
  { code: 'cv', name: 'Chuvash' },
  { code: 'kw', name: 'Cornish' },
  { code: 'co', name: 'Corsican' },
  { code: 'cr', name: 'Cree' },
  { code: 'hr', name: 'Croatian' },
  { code: 'cs', name: 'Czech' },
  { code: 'da', name: 'Danish' },
  {
    code: 'dv',
    name: 'Divehi, Dhivehi, Maldivian',
  },
  { code: 'nl', name: 'Dutch, Flemish' },
  { code: 'dz', name: 'Dzongkha' },
  { code: 'en', name: 'English' },
  { code: 'eo', name: 'Esperanto' },
  { code: 'et', name: 'Estonian' },
  { code: 'ee', name: 'Ewe' },
  { code: 'fo', name: 'Faroese' },
  { code: 'fj', name: 'Fijian' },
  { code: 'fi', name: 'Finnish' },
  { code: 'fr', name: 'French' },
  { code: 'ff', name: 'Fulah' },
  { code: 'gd', name: 'Gaelic, Scottish Gaelic' },
  { code: 'gl', name: 'Galician' },
  { code: 'lg', name: 'Ganda' },
  { code: 'ka', name: 'Georgian' },
  { code: 'de', name: 'German' },
  { code: 'ki', name: 'Gikuyu, Kikuyu' },
  { code: 'el', name: 'Greek (Modern)' },
  {
    code: 'kl',
    name: 'Greenlandic, Kalaallisut',
  },
  { code: 'gn', name: 'Guarani' },
  { code: 'gu', name: 'Gujarati' },
  { code: 'ht', name: 'Haitian, Haitian Creole' },
  { code: 'ha', name: 'Hausa' },
  { code: 'he', name: 'Hebrew' },
  { code: 'hz', name: 'Herero' },
  { code: 'hi', name: 'Hindi' },
  { code: 'ho', name: 'Hiri Motu' },
  { code: 'hu', name: 'Hungarian' },
  { code: 'is', name: 'Icelandic' },
  { code: 'io', name: 'Ido' },
  { code: 'ig', name: 'Igbo' },
  { code: 'id', name: 'Indonesian' },
  {
    code: 'ia',
    name: 'Interlingua (International Auxiliary Language Association)',
  },
  { code: 'ie', name: 'Interlingue' },
  { code: 'iu', name: 'Inuktitut' },
  { code: 'ik', name: 'Inupiaq' },
  { code: 'ga', name: 'Irish' },
  { code: 'it', name: 'Italian' },
  { code: 'ja', name: 'Japanese' },
  { code: 'jv', name: 'Javanese' },
  { code: 'kn', name: 'Kannada' },
  { code: 'kr', name: 'Kanuri' },
  { code: 'ks', name: 'Kashmiri' },
  { code: 'kk', name: 'Kazakh' },
  { code: 'rw', name: 'Kinyarwanda' },
  { code: 'kv', name: 'Komi' },
  { code: 'kg', name: 'Kongo' },
  { code: 'ko', name: 'Korean' },
  { code: 'kj', name: 'Kwanyama, Kuanyama' },
  { code: 'ku', name: 'Kurdish' },
  { code: 'ky', name: 'Kyrgyz' },
  { code: 'lo', name: 'Lao' },
  { code: 'la', name: 'Latin' },
  { code: 'lv', name: 'Latvian' },
  {
    code: 'lb',
    name: 'Letzeburgesch, Luxembourgish',
  },
  {
    code: 'li',
    name: 'Limburgish, Limburgan, Limburger',
  },
  { code: 'ln', name: 'Lingala' },
  { code: 'lt', name: 'Lithuanian' },
  { code: 'lu', name: 'Luba-Katanga' },
  { code: 'mk', name: 'Macedonian' },
  { code: 'mg', name: 'Malagasy' },
  { code: 'ms', name: 'Malay' },
  { code: 'ml', name: 'Malayalam' },
  { code: 'mt', name: 'Maltese' },
  { code: 'gv', name: 'Manx' },
  { code: 'mi', name: 'Maori' },
  { code: 'mr', name: 'Marathi' },
  { code: 'mh', name: 'Marshallese' },
  {
    code: 'ro',
    name: 'Moldovan, Moldavian, Romanian',
  },
  { code: 'mn', name: 'Mongolian' },
  { code: 'na', name: 'Nauru' },
  { code: 'nv', name: 'Navajo, Navaho' },
  { code: 'nd', name: 'Northern Ndebele' },
  { code: 'ng', name: 'Ndonga' },
  { code: 'ne', name: 'Nepali' },
  { code: 'se', name: 'Northern Sami' },
  { code: 'no', name: 'Norwegian' },
  { code: 'nb', name: 'Norwegian Bokmål' },
  { code: 'nn', name: 'Norwegian Nynorsk' },
  { code: 'ii', name: 'Nuosu, Sichuan Yi' },
  { code: 'oc', name: 'Occitan (post 1500)' },
  { code: 'oj', name: 'Ojibwa' },
  { code: 'or', name: 'Oriya' },
  { code: 'om', name: 'Oromo' },
  { code: 'os', name: 'Ossetian, Ossetic' },
  { code: 'pi', name: 'Pali' },
  { code: 'pa', name: 'Panjabi, Punjabi' },
  { code: 'ps', name: 'Pashto, Pushto' },
  { code: 'fa', name: 'Persian' },
  { code: 'pl', name: 'Polish' },
  { code: 'pt', name: 'Portuguese' },
  { code: 'qu', name: 'Quechua' },
  { code: 'rm', name: 'Romansh' },
  { code: 'rn', name: 'Rundi' },
  { code: 'ru', name: 'Russian' },
  { code: 'sm', name: 'Samoan' },
  { code: 'sg', name: 'Sango' },
  { code: 'sa', name: 'Sanskrit' },
  { code: 'sc', name: 'Sardinian' },
  { code: 'sr', name: 'Serbian' },
  { code: 'sn', name: 'Shona' },
  { code: 'sd', name: 'Sindhi' },
  { code: 'si', name: 'Sinhala, Sinhalese' },
  { code: 'sk', name: 'Slovak' },
  { code: 'sl', name: 'Slovenian' },
  { code: 'so', name: 'Somali' },
  { code: 'st', name: 'Sotho, Southern' },
  { code: 'nr', name: 'South Ndebele' },
  { code: 'es', name: 'Spanish, Castilian' },
  { code: 'su', name: 'Sundanese' },
  { code: 'sw', name: 'Swahili' },
  { code: 'ss', name: 'Swati' },
  { code: 'sv', name: 'Swedish' },
  { code: 'tl', name: 'Tagalog' },
  { code: 'ty', name: 'Tahitian' },
  { code: 'tg', name: 'Tajik' },
  { code: 'ta', name: 'Tamil' },
  { code: 'tt', name: 'Tatar' },
  { code: 'te', name: 'Telugu' },
  { code: 'th', name: 'Thai' },
  { code: 'bo', name: 'Tibetan' },
  { code: 'ti', name: 'Tigrinya' },
  { code: 'to', name: 'Tonga (Tonga Islands)' },
  { code: 'ts', name: 'Tsonga' },
  { code: 'tn', name: 'Tswana' },
  { code: 'tr', name: 'Turkish' },
  { code: 'tk', name: 'Turkmen' },
  { code: 'tw', name: 'Twi' },
  { code: 'ug', name: 'Uighur, Uyghur' },
  { code: 'uk', name: 'Ukrainian' },
  { code: 'ur', name: 'Urdu' },
  { code: 'uz', name: 'Uzbek' },
  { code: 've', name: 'Venda' },
  { code: 'vi', name: 'Vietnamese' },
  { code: 'vo', name: 'Volap_k' },
  { code: 'wa', name: 'Walloon' },
  { code: 'cy', name: 'Welsh' },
  { code: 'fy', name: 'Western Frisian' },
  { code: 'wo', name: 'Wolof' },
  { code: 'xh', name: 'Xhosa' },
  { code: 'yi', name: 'Yiddish' },
  { code: 'yo', name: 'Yoruba' },
  { code: 'za', name: 'Zhuang, Chuang' },
  { code: 'zu', name: 'Zulu' },
];

const googleFonts = [
  'ABeeZee',
  'Abel',
  'Aclonica',
  'Acme',
  'Actor',
  'Advent Pro',
  'Alata',
  'Alatsi',
  'Aldrich',
  'Alef',
  'Alegreya Sans',
  'Alegreya Sans SC',
  'Allerta',
  'Allerta Stencil',
  'Almarai',
  'Alumni Sans',
  'Amaranth',
  'Amiko',
  'Anaheim',
  'Andika',
  'Andika New Basic',
  'Antic',
  'Anton',
  'Antonio',
  'Archivo',
  'Archivo Black',
  'Archivo Narrow',
  'Arimo',
  'Armata',
  'Arsenal',
  'Arya',
  'Asap',
  'Asap Condensed',
  'Assistant',
  'Asul',
  'Athiti',
  'Atkinson Hyperlegible',
  'Average Sans',
  'B612',
  'Bai Jamjuree',
  'Barlow',
  'Barlow Condensed',
  'Barlow Semi Condensed',
  'Basic',
  'Bayon',
  'Be Vietnam Pro',
  'Belleza',
  'BenchNine',
  'Biryani',
  'Black And White Picture',
  'Black Han Sans',
  'Blinker',
  'Bubbler One',
  'Cabin',
  'Cabin Condensed',
  'Cagliostro',
  'Cairo',
  'Cambay',
  'Candal',
  'Cantarell',
  'Cantora One',
  'Capriola',
  'Carme',
  'Carrois Gothic',
  'Carrois Gothic SC',
  'Catamaran',
  'Chakra Petch',
  'Changa',
  'Chathura',
  'Chau Philomene One',
  'Chivo',
  'Coda Caption',
  'Commissioner',
  'Convergence',
  'Cuprum',
  'DM Sans',
  'Darker Grotesque',
  'Days One',
  'Denk One',
  'Dhurjati',
  'Didact Gothic',
  'Do Hyeon',
  'Dongle',
  'Doppio One',
  'Dorsa',
  'Dosis',
  'DotGothic16',
  'Duru Sans',
  'Economica',
  'El Messiri',
  'Electrolize',
  'Encode Sans',
  'Encode Sans Condensed',
  'Encode Sans Expanded',
  'Encode Sans SC',
  'Encode Sans Semi Condensed',
  'Encode Sans Semi Expanded',
  'Englebert',
  'Epilogue',
  'Exo',
  'Exo 2',
  'Fahkwang',
  'Farro',
  'Federo',
  'Fira Sans',
  'Fira Sans Condensed',
  'Fira Sans Extra Condensed',
  'Fjalla One',
  'Francois One',
  'Fresca',
  'GFS Neohellenic',
  'Gafata',
  'Galdeano',
  'Gayathri',
  'Gemunu Libre',
  'Genos',
  'Geo',
  'Georama',
  'Gidugu',
  'Glory',
  'Gothic A1',
  'Gotu',
  'Gowun Dodum',
  'Gudea',
  'Hammersmith One',
  'Harmattan',
  'Heebo',
  'Hind',
  'Hind Guntur',
  'Hind Madurai',
  'Hind Siliguri',
  'Hind Vadodara',
  'Homenaje',
  'IBM Plex Sans',
  'IBM Plex Sans Arabic',
  'IBM Plex Sans Condensed',
  'IBM Plex Sans Devanagari',
  'IBM Plex Sans Hebrew',
  'IBM Plex Sans KR',
  'IBM Plex Sans Thai',
  'IBM Plex Sans Thai Looped',
  'Imprima',
  'Inder',
  'Inria Sans',
  'Inter',
  'Istok Web',
  'Jaldi',
  'Jockey One',
  'Josefin Sans',
  'Jost',
  'Jua',
  'Julius Sans One',
  'Jura',
  'K2D',
  'Kanit',
  'Kantumruy',
  'Karla',
  'Khand',
  'Khula',
  'Kite One',
  'KoHo',
  'Kodchasan',
  'Kosugi',
  'Kosugi Maru',
  'Krona One',
  'Krub',
  'Kufam',
  'Kulim Park',
  'Kumbh Sans',
  'Laila',
  'Lato',
  'Lekton',
  'Lexend',
  'Lexend Deca',
  'Lexend Exa',
  'Lexend Giga',
  'Lexend Mega',
  'Lexend Peta',
  'Lexend Tera',
  'Lexend Zetta',
  'Libre Franklin',
  'Livvic',
  'M PLUS 1',
  'M PLUS 1 Code',
  'M PLUS 1p',
  'M PLUS 2',
  'M PLUS Code Latin',
  'M PLUS Rounded 1c',
  'Mada',
  'Magra',
  'Mako',
  'Mallanna',
  'Mandali',
  'Manjari',
  'Manrope',
  'Marmelad',
  'Martel Sans',
  'Marvel',
  'Maven Pro',
  'Meera Inimai',
  'Merriweather Sans',
  'Metrophobic',
  'Michroma',
  'Mina',
  'Miriam Libre',
  'Mitr',
  'Mochiy Pop One',
  'Mochiy Pop P One',
  'Mohave',
  'Molengo',
  'Monda',
  'Montserrat',
  'Montserrat Alternates',
  'Montserrat Subrayada',
  'Mouse Memoirs',
  'Mukta',
  'Mukta Mahee',
  'Mukta Malar',
  'Mukta Vaani',
  'Mulish',
  'Murecho',
  'NTR',
  'Nanum Gothic',
  'News Cycle',
  'Niramit',
  'Nobile',
  'Nokora',
  'Notable',
  'Noto Kufi Arabic',
  'Noto Music',
  'Noto Sans',
  'Noto Sans Adlam',
  'Noto Sans Adlam Unjoined',
  'Noto Sans Anatolian Hieroglyphs',
  'Noto Sans Arabic',
  'Noto Sans Armenian',
  'Noto Sans Avestan',
  'Noto Sans Balinese',
  'Noto Sans Bamum',
  'Noto Sans Bassa Vah',
  'Noto Sans Batak',
  'Noto Sans Bengali',
  'Noto Sans Bhaiksuki',
  'Noto Sans Brahmi',
  'Noto Sans Buginese',
  'Noto Sans Buhid',
  'Noto Sans Canadian Aboriginal',
  'Noto Sans Carian',
  'Noto Sans Caucasian Albanian',
  'Noto Sans Chakma',
  'Noto Sans Cham',
  'Noto Sans Cherokee',
  'Noto Sans Coptic',
  'Noto Sans Cuneiform',
  'Noto Sans Cypriot',
  'Noto Sans Deseret',
  'Noto Sans Devanagari',
  'Noto Sans Display',
  'Noto Sans Duployan',
  'Noto Sans Egyptian Hieroglyphs',
  'Noto Sans Elbasan',
  'Noto Sans Elymaic',
  'Noto Sans Georgian',
  'Noto Sans Glagolitic',
  'Noto Sans Gothic',
  'Noto Sans Grantha',
  'Noto Sans Gujarati',
  'Noto Sans Gunjala Gondi',
  'Noto Sans Gurmukhi',
  'Noto Sans HK',
  'Noto Sans Hanifi Rohingya',
  'Noto Sans Hanunoo',
  'Noto Sans Hatran',
  'Noto Sans Hebrew',
  'Noto Sans Imperial Aramaic',
  'Noto Sans Indic Siyaq Numbers',
  'Noto Sans Inscriptional Pahlavi',
  'Noto Sans Inscriptional Parthian',
  'Noto Sans JP',
  'Noto Sans Javanese',
  'Noto Sans KR',
  'Noto Sans Kaithi',
  'Noto Sans Kannada',
  'Noto Sans Kayah Li',
  'Noto Sans Kharoshthi',
  'Noto Sans Khmer',
  'Noto Sans Khojki',
  'Noto Sans Khudawadi',
  'Noto Sans Lao',
  'Noto Sans Lepcha',
  'Noto Sans Limbu',
  'Noto Sans Linear A',
  'Noto Sans Linear B',
  'Noto Sans Lisu',
  'Noto Sans Lycian',
  'Noto Sans Lydian',
  'Noto Sans Mahajani',
  'Noto Sans Malayalam',
  'Noto Sans Mandaic',
  'Noto Sans Manichaean',
  'Noto Sans Marchen',
  'Noto Sans Masaram Gondi',
  'Noto Sans Math',
  'Noto Sans Mayan Numerals',
  'Noto Sans Medefaidrin',
  'Noto Sans Meetei Mayek',
  'Noto Sans Meroitic',
  'Noto Sans Miao',
  'Noto Sans Modi',
  'Noto Sans Mongolian',
  'Noto Sans Mro',
  'Noto Sans Multani',
  'Noto Sans Myanmar',
  'Noto Sans N Ko',
  'Noto Sans Nabataean',
  'Noto Sans New Tai Lue',
  'Noto Sans Newa',
  'Noto Sans Nushu',
  'Noto Sans Ogham',
  'Noto Sans Ol Chiki',
  'Noto Sans Old Hungarian',
  'Noto Sans Old Italic',
  'Noto Sans Old North Arabian',
  'Noto Sans Old Permic',
  'Noto Sans Old Persian',
  'Noto Sans Old Sogdian',
  'Noto Sans Old South Arabian',
  'Noto Sans Old Turkic',
  'Noto Sans Oriya',
  'Noto Sans Osage',
  'Noto Sans Osmanya',
  'Noto Sans Pahawh Hmong',
  'Noto Sans Palmyrene',
  'Noto Sans Pau Cin Hau',
  'Noto Sans Phags Pa',
  'Noto Sans Phoenician',
  'Noto Sans Psalter Pahlavi',
  'Noto Sans Rejang',
  'Noto Sans Runic',
  'Noto Sans SC',
  'Noto Sans Samaritan',
  'Noto Sans Saurashtra',
  'Noto Sans Sharada',
  'Noto Sans Shavian',
  'Noto Sans Siddham',
  'Noto Sans Sinhala',
  'Noto Sans Sogdian',
  'Noto Sans Sora Sompeng',
  'Noto Sans Soyombo',
  'Noto Sans Sundanese',
  'Noto Sans Syloti Nagri',
  'Noto Sans Symbols',
  'Noto Sans Symbols 2',
  'Noto Sans Syriac',
  'Noto Sans TC',
  'Noto Sans Tagalog',
  'Noto Sans Tagbanwa',
  'Noto Sans Tai Le',
  'Noto Sans Tai Tham',
  'Noto Sans Tai Viet',
  'Noto Sans Takri',
  'Noto Sans Tamil',
  'Noto Sans Tamil Supplement',
  'Noto Sans Telugu',
  'Noto Sans Thaana',
  'Noto Sans Thai',
  'Noto Sans Thai Looped',
  'Noto Sans Tifinagh',
  'Noto Sans Tirhuta',
  'Noto Sans Ugaritic',
  'Noto Sans Vai',
  'Noto Sans Wancho',
  'Noto Sans Warang Citi',
  'Noto Sans Yi',
  'Noto Sans Zanabazar Square',
  'Noto Traditional Nushu',
  'Numans',
  'Nunito',
  'Nunito Sans',
  'Open Sans',
  'Open Sans Condensed',
  'Orbitron',
  'Orienta',
  'Oswald',
  'Otomanopee One',
  'Outfit',
  'Overpass',
  'Oxygen',
  'PT Sans',
  'PT Sans Caption',
  'PT Sans Narrow',
  'Padauk',
  'Palanquin',
  'Palanquin Dark',
  'Pathway Gothic One',
  'Pattaya',
  'Pavanam',
  'Paytone One',
  'Philosopher',
  'Play',
  'Pontano Sans',
  'Poppins',
  'Port Lligat Sans',
  'Pragati Narrow',
  'Preahvihear',
  'Prompt',
  'Proza Libre',
  'Public Sans',
  'Puritan',
  'Qahiri',
  'Quantico',
  'Quattrocento Sans',
  'Questrial',
  'Quicksand',
  'Rajdhani',
  'Raleway',
  'Ramabhadra',
  'Rambla',
  'Rationale',
  'Readex Pro',
  'Recursive',
  'Red Hat Display',
  'Red Hat Text',
  'Reem Kufi',
  'Roboto',
  'Roboto Condensed',
  'RocknRoll One',
  'Ropa Sans',
  'Rosario',
  'Rubik',
  'Rubik Mono One',
  'Ruda',
  'Ruluko',
  'Rum Raisin',
  'Russo One',
  'Saira',
  'Saira Condensed',
  'Saira Extra Condensed',
  'Saira Semi Condensed',
  'Sansita',
  'Sarabun',
  'Sarala',
  'Sarpanch',
  'Sawarabi Gothic',
  'Scada',
  'Secular One',
  'Sen',
  'Seymour One',
  'Shanti',
  'Share Tech',
  'Shippori Antique',
  'Shippori Antique B1',
  'Signika',
  'Signika Negative',
  'Sintony',
  'Six Caps',
  'Snippet',
  'Sora',
  'Source Sans 3',
  'Source Sans Pro',
  'Source Serif 4',
  'Space Grotesk',
  'Spartan',
  'Spinnaker',
  'Spline Sans',
  'Stick',
  'Stick No Bills',
  'Strait',
  'Stylish',
  'Sulphur Point',
  'Sunflower',
  'Syncopate',
  'Syne',
  'Tajawal',
  'Tauri',
  'Teko',
  'Telex',
  'Tenali Ramakrishna',
  'Tenor Sans',
  'Text Me One',
  'Thasadith',
  'Timmana',
  'Titillium Web',
  'Tomorrow',
  'Trispace',
  'Truculenta',
  'Ubuntu',
  'Ubuntu Condensed',
  'Urbanist',
  'Varela',
  'Varela Round',
  'Varta',
  'Viga',
  'Voltaire',
  'Wendy One',
  'Wire One',
  'Work Sans',
  'Yaldevi',
  'Yanone Kaffeesatz',
  'Yantramanav',
  'Yusei Magic',
  'Zen Kaku Gothic Antique',
  'Zen Kaku Gothic New',
  'Zen Kurenaido',
  'Zen Maru Gothic',
];

const DomainChangeManifest = () => {
  const { domain = {}, update } = useDomainContext();

  return (
    <SystemPageSub title="domainManifest">
      <Builders.Form
        isNew
        collectionName="domain"
        initialValues={{
          ...domain,
          supportedLngs: map(
            domain?.supportedLngs,
            (lng) => ({
              label: langCodes.find((l) => l.code === lng)
                ?.name,
              value: lng,
            }),
          ),
        }}
        keep={[
          'brand',
          'title',
          'color',
          'colorDarkMode',
          'supportedLngs',
          'description',
          'font',
          'invertLogo',
          'padLogo',
        ]}
        onSubmit={update}
        showSuccessMessage
        marshalSelectively
        marshal={{
          supportedLngs: [(v) => compact(map(v, 'value'))],
          invertLogo: [castToBoolean],
          padLogo: [castToBoolean],
        }}
      >
        <Builders.Field
          type="text"
          name="brand"
          xl={12}
          lg={12}
        />
        <Builders.Field
          type="text"
          name="title"
          xl={12}
          lg={12}
        />
        <Builders.Field
          type="color"
          name="color"
          xl={12}
          lg={12}
        />
        <Builders.Field
          type="color"
          name="colorDarkMode"
          xl={12}
          lg={12}
        />
        <Builders.Field
          type="select"
          name="font"
          xl={12}
          lg={12}
          options={googleFonts}
        />
        <Builders.Field
          displayLabelAsValue
          type="chips"
          name="supportedLngs"
          options={langCodes.map((item) => ({
            label: item.name,
            value: item.code,
          }))}
          xl={12}
          lg={12}
        />
        <Builders.Field
          type="text"
          name="description"
          multiline
          rows={5}
          max="155"
          xl={12}
          lg={12}
        />
        <Builders.Field
          type="checkbox"
          name="invertLogo"
          variant="switch"
          xl={12}
          lg={12}
        />
        <Builders.Field
          type="checkbox"
          name="padLogo"
          variant="switch"
          xl={12}
          lg={12}
        />
      </Builders.Form>
    </SystemPageSub>
  );
};

export default DomainChangeManifest;