import React from 'react';
import { SvgXml } from 'react-native-svg';

// Brand glyphs for the messaging channels, mirrored from the web design system's
// SocialMediaIcon set (@base44/design-system social-media-icon.data) so the native
// Channels screen shows the same full-colour marks the web builder does. The DS
// component is React-DOM only and can't be imported here, so its SVG paths are
// inlined as standalone documents. Each gradient carries a unique id so multiple
// icons can render on one screen without collisions. Brand colours are fixed by
// definition and intentionally not themed.
export type ChannelBrandId = 'whatsapp' | 'telegram' | 'imessage' | 'slack';

const CHANNEL_BRAND_ICON_XML: Record<ChannelBrandId, string> = {
  whatsapp: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 24L1.687 17.837C0.646 16.033 0.099 13.988 0.1 11.891C0.103 5.335 5.438 0 11.993 0C15.174 0.001 18.16 1.24 20.406 3.488C22.651 5.736 23.887 8.724 23.886 11.902C23.883 18.459 18.548 23.794 11.993 23.794C10.003 23.793 8.042 23.294 6.305 22.346L0 24ZM6.597 20.193C8.273 21.188 9.873 21.784 11.989 21.785C17.437 21.785 21.875 17.351 21.878 11.9C21.88 6.438 17.463 2.01 11.997 2.008C6.545 2.008 2.11 6.442 2.108 11.892C2.107 14.117 2.759 15.783 3.854 17.526L2.855 21.174L6.597 20.193ZM17.984 14.729C17.91 14.605 17.712 14.531 17.414 14.382C17.117 14.233 15.656 13.514 15.383 13.415C15.111 13.316 14.913 13.266 14.714 13.564C14.516 13.861 13.946 14.531 13.773 14.729C13.6 14.927 13.426 14.952 13.129 14.803C12.832 14.654 11.874 14.341 10.739 13.328C9.856 12.54 9.259 11.567 9.086 11.269C8.913 10.972 9.068 10.811 9.216 10.663C9.35 10.53 9.513 10.316 9.662 10.142C9.813 9.97 9.862 9.846 9.962 9.647C10.061 9.449 10.012 9.275 9.937 9.126C9.862 8.978 9.268 7.515 9.021 6.92C8.779 6.341 8.534 6.419 8.352 6.41L7.782 6.4C7.584 6.4 7.262 6.474 6.99 6.772C6.718 7.07 5.95 7.788 5.95 9.251C5.95 10.714 7.015 12.127 7.163 12.325C7.312 12.523 9.258 15.525 12.239 16.812C12.948 17.118 13.502 17.301 13.933 17.438C14.645 17.664 15.293 17.632 15.805 17.556C16.376 17.471 17.563 16.837 17.811 16.143C18.059 15.448 18.059 14.853 17.984 14.729Z" fill="#25D366"/></svg>`,
  telegram: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="url(#tg)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.43189 11.8733C8.93014 10.3492 11.2628 9.3444 12.43 8.85893C15.7626 7.47282 16.455 7.23203 16.9064 7.22408C17.0056 7.22234 17.2276 7.24694 17.3714 7.3636C17.4928 7.46211 17.5262 7.59518 17.5422 7.68857C17.5581 7.78197 17.578 7.99473 17.5622 8.16098C17.3816 10.0585 16.6002 14.6632 16.2027 16.7884C16.0345 17.6876 15.7032 17.9891 15.3826 18.0186C14.6857 18.0828 14.1566 17.5581 13.4816 17.1157C12.4255 16.4234 11.8288 15.9924 10.8036 15.3168C9.61884 14.536 10.3869 14.1069 11.0621 13.4056C11.2388 13.2221 14.3092 10.4294 14.3686 10.176C14.376 10.1443 14.3829 10.0262 14.3128 9.96385C14.2426 9.90148 14.139 9.92281 14.0643 9.93977C13.9584 9.96381 12.2712 11.079 9.00264 13.2853C8.52373 13.6142 8.08994 13.7744 7.70129 13.766C7.27283 13.7568 6.44864 13.5238 5.83594 13.3246C5.08444 13.0803 4.48716 12.9512 4.53917 12.5363C4.56626 12.3202 4.86383 12.0992 5.43189 11.8733Z" fill="white"/><defs><linearGradient id="tg" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="#2AABEE"/><stop offset="1" stop-color="#229ED9"/></linearGradient></defs></svg>`,
  imessage: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="5" fill="url(#im)"/><path d="M12 18.7692C16.9706 18.7692 21 15.4626 21 11.3846C21 7.30667 16.9706 4 12 4C7.02943 4 3 7.30667 3 11.3846C3 13.9528 4.59857 16.2158 7.02343 17.5385C6.70588 18.7692 5.57143 20 5.57143 20C7.02343 20 8.29412 19.529 9.70029 18.5255C10.434 18.6847 11.2054 18.7692 12 18.7692Z" fill="white"/><defs><linearGradient id="im" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="#5BF675"/><stop offset="1" stop-color="#0CBD2A"/></linearGradient></defs></svg>`,
  slack: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.1401 15.1181C5.1401 16.4977 4.02514 17.6126 2.64561 17.6126C1.26608 17.6126 0.151123 16.4977 0.151123 15.1181C0.151123 13.7386 1.26608 12.6237 2.64561 12.6237H5.1401V15.1181ZM6.38734 15.1181C6.38734 13.7386 7.5023 12.6237 8.88183 12.6237C10.2614 12.6237 11.3763 13.7386 11.3763 15.1181V21.3544C11.3763 22.7339 10.2614 23.8489 8.88183 23.8489C7.5023 23.8489 6.38734 22.7339 6.38734 21.3544V15.1181Z" fill="#E01E5A"/><path d="M8.88193 5.10238C7.5024 5.10238 6.38744 3.98742 6.38744 2.60789C6.38744 1.22836 7.5024 0.113403 8.88193 0.113403C10.2615 0.113403 11.3764 1.22836 11.3764 2.60789V5.10238H8.88193ZM8.88193 6.36852C10.2615 6.36852 11.3764 7.48348 11.3764 8.86301C11.3764 10.2425 10.2615 11.3575 8.88193 11.3575H2.62681C1.24728 11.3575 0.132324 10.2425 0.132324 8.86301C0.132324 7.48348 1.24728 6.36852 2.62681 6.36852H8.88193Z" fill="#36C5F0"/><path d="M18.8788 8.86301C18.8788 7.48348 19.9938 6.36852 21.3733 6.36852C22.7528 6.36852 23.8678 7.48348 23.8678 8.86301C23.8678 10.2425 22.7528 11.3575 21.3733 11.3575H18.8788V8.86301ZM17.6316 8.86301C17.6316 10.2425 16.5166 11.3575 15.1371 11.3575C13.7575 11.3575 12.6426 10.2425 12.6426 8.86301V2.60789C12.6426 1.22836 13.7575 0.113403 15.1371 0.113403C16.5166 0.113403 17.6316 1.22836 17.6316 2.60789V8.86301Z" fill="#2EB67D"/><path d="M15.1371 18.8599C16.5166 18.8599 17.6316 19.9748 17.6316 21.3544C17.6316 22.7339 16.5166 23.8489 15.1371 23.8489C13.7575 23.8489 12.6426 22.7339 12.6426 21.3544V18.8599H15.1371ZM15.1371 17.6126C13.7575 17.6126 12.6426 16.4977 12.6426 15.1181C12.6426 13.7386 13.7575 12.6237 15.1371 12.6237H21.3922C22.7717 12.6237 23.8867 13.7386 23.8867 15.1181C23.8867 16.4977 22.7717 17.6126 21.3922 17.6126H15.1371Z" fill="#ECB22E"/></svg>`,
};

export function ChannelBrandIcon({ channel, size }: { channel: ChannelBrandId; size: number }) {
  return <SvgXml height={size} width={size} xml={CHANNEL_BRAND_ICON_XML[channel]} />;
}