import { PopupHeader } from "@/components/Popup";
import {
  TouchMoveDistance,
  useTouchMoveDistance,
} from "@/hooks/useTouchMoveDistance";
import clsx from "clsx";
import React, {
  FC,
  forwardRef,
  memo,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";
import ArrowUp from "../../../assets/images/arrow_up.svg";
import ArrowUpWide from "../../../assets/images/arrow_up_wide.svg";
import Popup from "../../Popup/Popup";
import { WalletItemProps } from "../type";
import { cn } from "../utils";
import { isMobileDevice } from "../utils/device";
import InputSearch from "./InputSearch";
import WalletItem from "./WalletItem";
import "./WalletSelector.css";
import {
  FULLSCREEN_POSITION,
  SECOND_LEVEL_POSITION,
  useScrollState,
} from "./hooks/useScrollState";
import Divider from "./Divider";
import ArrowRight from '../../../assets/images/arrow_up_wide_line.svg'

interface PropsType {
  className?: string;
  grid?: boolean;
  style?: React.CSSProperties;
  walletList: WalletItemProps[];
  handleClick: (item: WalletItemProps, index: number) => void;
  loadingIconKey?: string;
  socialsFirst?: boolean
}
const WalletListComp = (
  {
    className,
    grid,
    style,
    walletList,
    handleClick,
    loadingIconKey,
  }: PropsType,
  ref: any,
) => {
  const oneLine = walletList.length <= 4;

  if (oneLine && !grid)
    return (
      <div className={cn(className, "uikit-px-[10px]")} style={style} ref={ref}>
        <div
          className={
            "uikit-flex uikit-items-center uikit-justify-center uikit-gap-y-2"
          }
        >
          {walletList.map((option, index) => {
            return (
              <WalletItem
                className="uikit-w-1/4"
                key={option.key}
                wallet={option}
                handleClick={() => {
                  handleClick(option, index);
                }}
                isLoading={loadingIconKey === option.key}
              />
            );
          })}
        </div>
      </div>
    );

  return (
    <div className={cn(className, "uikit-px-[10px]")} style={style} ref={ref}>
      <div className={"uikit-grid uikit-grid-cols-4 uikit-gap-y-4"}>
        {walletList.map((option, index) => {
          return (
            <WalletItem
              key={option.key}
              wallet={option}
              handleClick={() => {
                handleClick(option, index);
              }}
              isLoading={loadingIconKey === option.key}
            />
          );
        })}
      </div>
    </div>
  );
};
export const WalletList = forwardRef(WalletListComp);

const WalletSelector: FC<PropsType> = ({
  walletList,
  handleClick,
  loadingIconKey,
  socialsFirst
}) => {
  const [opened, setOpened] = useState(false);
  const [fullScreen, setFullScreen] = useState(false);
  const [keyWord, setKeyWord] = useState("");
  const firstWalletList = walletList.slice(0, 4);
  const isMobile = isMobileDevice();
  const walletListRef = useRef<HTMLDivElement>(null);
  const ref = useRef<HTMLDivElement>(null);

  const filterWalletList = walletList.filter((item) =>
    item.name.toLowerCase().startsWith(keyWord.toLowerCase()),
  );
  const showHeader = walletList.length > 4;
  const canFullScreen = walletList.length > 8;

  const onClose = useCallback(() => {
    setOpened(false);
    if (fullScreen) setFullScreen(false);
    if (walletListRef?.current) walletListRef.current.scrollTop = 0;
  }, [fullScreen]);

  const { scrollToFullScreen, scrollToSecondLevel } = useScrollState(
    ref,
    { fullScreen, canFullScreen },
    {
      setFullScreen,
      onClose,
    },
  );

  const onOpen = useCallback(() => {
    setOpened(true);
  }, []);

  useEffect(() => {
    if (opened) {
      socialsFirst && scrollToSecondLevel();
    }
  }, [opened, scrollToSecondLevel, socialsFirst]);

  const headerRef = useRef<HTMLDivElement>(null);
  const handleContainerTouchEnd = useCallback(
    (touchMoveDistance: TouchMoveDistance) => {
      const canUnfold = walletList.length > 4;
      if (canUnfold && touchMoveDistance.y < -1) onOpen();
    },
    [onOpen, walletList.length],
  );
  useTouchMoveDistance(headerRef, {
    enable: isMobile,
    handleTouchEnd: handleContainerTouchEnd,
  });

  return (
    <div
      className={cn(
        "uikit-rounded-t-lg uikit-border uikit-border-solid uikit-border-border uikit-border-b-0 uikit-pb-[26px]",
        {
          "uikit-border-none": !showHeader || !socialsFirst,
          "uikit-pt-4": !socialsFirst,
        },
      )}
    >
      <div
        ref={headerRef}
        className={clsx({
          "uikit-invisible": opened,
        })}
      >
        {socialsFirst && showHeader && (
          <Header
            className="uikit-mb-3"
            allLen={walletList.length}
            renderLen={firstWalletList.length}
            onClick={() => {
              onOpen();
            }}
          />
        )}
        <WalletList
          walletList={firstWalletList}
          handleClick={handleClick}
          loadingIconKey={loadingIconKey}
        />
      </div>

      {!socialsFirst ? (
        <Divider
          className="uikit-px-5 uikit-pt-5 uikit-cursor-pointer"
          position="right"
          content={
            <span className="uikit-flex uikit-flex-items-center" onClick={onOpen}>
              Other wallets
              <img src={ArrowRight} />
            </span>
          }
        />
      ) : null}

      <Popup
        ref={ref}
        fixed={false}
        opened={opened}
        onClose={onClose}
        header={
          fullScreen || !socialsFirst ? (
            <PopupHeader title="Select your wallet" close back onClose={onClose} onBack={onClose} />
          ) : (
            <Header
              allLen={walletList.length}
              renderLen={8}
              onClick={() => {
                if (!canFullScreen) {
                  onClose();
                } else {
                  scrollToFullScreen();
                }
              }}
            />
          )
        }
        bodyClassName={
          socialsFirst
            ? "uikit-popup-enable-scroll"
            : "sm:uikit-m-auto sm:uikit-w-auto sm:uikit-animate-none sm:uikit-min-w-[375px]"
        }
        bodyStyle={{
          top: !socialsFirst ? "0px" : canFullScreen ? `${FULLSCREEN_POSITION}px` : `${SECOND_LEVEL_POSITION}px`,
          height: canFullScreen || !socialsFirst ? "100%" : "364px",
        }}
      >
        {fullScreen || !socialsFirst ? (
          <>
            <InputSearch onSearch={(kw: string) => setKeyWord(kw)} />
            {filterWalletList.length > 0 ? (
              <WalletList
                ref={walletListRef}
                grid
                className="uikit uikit-pb-16 uikit-mt-5 uikit-h-[calc(100%-60px-60px-20px)] uikit-overflow-y-auto uikit-overscroll-y-contain uikit-flex-1 uikit-min-h-0"
                style={{
                  WebkitOverflowScrolling: "touch",
                }}
                walletList={filterWalletList}
                handleClick={handleClick}
                loadingIconKey={loadingIconKey}
              />
            ) : (
              <Empty />
            )}
          </>
        ) : (
          <>
            <div
              className={cn(
                "uikit-px-5 uikit-py-[9px] uikit-text-[20px] uikit-font-switzerBold uikit-text-[#12122A] dark:uikit-text-white",
              )}
            >
              Select your wallet
            </div>

            <WalletList
              className="uikit-mt-7 uikit-pb-16 uikit-overflow-hidden"
              walletList={walletList}
              handleClick={handleClick}
              loadingIconKey={loadingIconKey}
            />
          </>
        )}
        <Footer />
      </Popup>
      {opened && !fullScreen && <Footer />}
    </div>
  );
};

export const Empty = () => {
  return (
    <div
      className={
        "uikit-flex uikit-flex-col uikit-items-center uikit-gap-2.5 uikit-pt-28 uikit-text-sm uikit-text-tc2 dark:uikit-text-tc2-dark"
      }
    >
      <WalletIcon />
      <div>No Wallet found</div>
    </div>
  );
};

export function WalletIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="80"
      height="80"
      viewBox="0 0 80 80"
      fill="none"
      {...props}
    >
      <path
        d="M69.7188 18.6328C69.9766 18.6328 70.2344 18.6563 70.4844 18.6875C69.8047 18.1563 68.9766 17.7813 68.0625 17.6407L18.3203 9.69534C15.4219 9.2344 12.6953 11.2032 12.2344 14.1016L11.5078 18.6407H69.7188V18.6328ZM75.0312 26.4453C75.0312 23.5078 72.6562 21.1328 69.7188 21.1328H10.3281C7.39062 21.1328 5.01562 23.5078 5.01562 26.4453V64.0625C5.01562 67 7.39062 69.375 10.3281 69.375H69.7109C72.6484 69.375 75.0234 67 75.0234 64.0625V53.961H54.4766C49.2422 53.961 45 49.7188 45 44.4844C45 39.25 49.2422 35.0078 54.4766 35.0078H75.0234V26.4453H75.0312Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M63.7036 11.437C63.6785 11.6532 63.5784 11.8537 63.4207 12.0038C63.263 12.1538 63.0577 12.2438 62.8406 12.2581C62.6234 12.2724 62.4081 12.2101 62.2321 12.082C62.0561 11.954 61.9306 11.7683 61.8773 11.5572L60.7175 3.22704C60.6917 2.82362 60.8269 2.42644 61.0933 2.12244C61.3598 1.81843 61.7358 1.63237 62.1391 1.60496C62.3509 1.59625 62.5622 1.63057 62.7603 1.70583C62.9584 1.7811 63.1392 1.89575 63.2917 2.04286C63.4443 2.18996 63.5654 2.36647 63.6478 2.56172C63.7303 2.75696 63.7722 2.96689 63.7712 3.17881L63.7036 11.437ZM67.0321 13.3952C66.8913 13.5611 66.6967 13.6724 66.4823 13.7096C66.2678 13.7469 66.0471 13.7078 65.8585 13.5992C65.6699 13.4906 65.5254 13.3193 65.4501 13.1151C65.3747 12.9109 65.3734 12.6867 65.4462 12.4817L69.1046 4.90842C69.3071 4.55856 69.64 4.30318 70.0303 4.19817C70.4207 4.09316 70.8368 4.14707 71.1875 4.34811C71.3684 4.45838 71.5252 4.60421 71.6482 4.77677C71.7712 4.94932 71.858 5.14504 71.9033 5.35207C71.9485 5.55911 71.9513 5.77317 71.9115 5.98133C71.8717 6.18948 71.7901 6.3874 71.6716 6.56313L67.0321 13.3952ZM69.0431 15.933C69.2451 16.0141 69.4691 16.0218 69.6762 15.9548L77.2159 12.5852C77.4091 12.498 77.5826 12.3726 77.726 12.2166C77.8693 12.0605 77.9796 11.8769 78.05 11.6771C78.1204 11.4772 78.1496 11.2651 78.1357 11.0536C78.1219 10.8422 78.0653 10.6357 77.9694 10.4467C77.7769 10.0912 77.4514 9.82651 77.0642 9.71046C76.677 9.59441 76.2595 9.6365 75.9033 9.8275L68.808 14.3436C68.6382 14.4797 68.5214 14.671 68.4781 14.8843C68.4347 15.0976 68.4675 15.3193 68.5708 15.5109C68.674 15.7025 68.8411 15.8519 69.0431 15.933Z"
        fill="#DFDFDF"
      />
      <path
        d="M52.9026 45.1103C52.9841 45.4558 53.133 45.7819 53.3405 46.0698C53.5481 46.3578 53.8104 46.602 54.1123 46.7886C54.4143 46.9752 54.7501 47.1005 55.1005 47.1574C55.4509 47.2142 55.8091 47.2015 56.1545 47.1199C56.5 47.0383 56.826 46.8895 57.114 46.6819C57.402 46.4744 57.6462 46.2121 57.8328 45.9101C58.0194 45.6081 58.1447 45.2724 58.2016 44.922C58.2584 44.5716 58.2457 44.2134 58.1641 43.8679C58.0825 43.5224 57.9337 43.1964 57.7261 42.9085C57.5185 42.6205 57.2563 42.3762 56.9543 42.1896C56.6523 42.003 56.3166 41.8777 55.9662 41.8209C55.6158 41.764 55.2576 41.7768 54.9121 41.8584C54.5666 41.9399 54.2406 42.0888 53.9526 42.2963C53.6647 42.5039 53.4204 42.7662 53.2338 43.0682C53.0472 43.3701 52.9219 43.7059 52.8651 44.0563C52.8082 44.4067 52.821 44.7649 52.9026 45.1103Z"
        fill="currentColor"
      />
    </svg>
  );
}

const Header = ({
  className,
  allLen,
  renderLen,
  onClick,
}: {
  className?: string;
  allLen: number;
  renderLen: number;
  onClick?: (needFold?: boolean) => void;
}) => {
  const diff = Math.ceil((allLen - renderLen) / 4);
  const isMobile = isMobileDevice();

  if (isMobile) return <Rounded />;

  const needDoubleUnfold = renderLen <= 4 && diff >= 2;
  const needFold = allLen > 4 && allLen <= 8 && renderLen === 8;

  return (
    <div
      className={cn(
        className,
        "uikit-pt-2 uikit-flex uikit-items-center uikit-justify-center uikit-cursor-pointer",
      )}
      onClick={() => {
        onClick?.(needFold);
      }}
    >
      {needDoubleUnfold ? (
        <img className="uikit-w-6 uikit-h-6" src={ArrowUpWide} />
      ) : (
        <img
          className={cn("uikit-w-6 uikit-h-6", {
            "uikit-rotate-180": needFold,
          })}
          src={ArrowUp}
        />
      )}
    </div>
  );
};

const Rounded = ({ onClick }: { onClick?: () => void }) => {
  return (
    <div
      onClick={() => {
        onClick?.();
      }}
      className="uikit-py-2 uikit-flex uikit-items-center uikit-justify-center"
    >
      <div className="uikit-w-10 uikit-h-1 uikit-rounded-[2.5px] uikit-bg-[#C1C0D8]"></div>
    </div>
  );
};

export const Footer = () => {
  return (
    <div className="uikit-z-[50] wallt-selector-power-by uikit-gap-1 uikit-text-[#C1C0D8] uikit-absolute uikit-bottom-0 uikit-py-2 uikit-left-[10px] uikit-right-[10px] uikit-flex uikit-items-center uikit-justify-center animate__animated animate__fadeIn animate__fast">
      <span className="uikit-text-t3 uikit-text-xs">Powered by</span>
      <PowerBy className="uikit-text-white dark:uikit-text-[#121212]" />
    </div>
  );
};

export default memo(WalletSelector);

const PowerBy = (
  props: React.SVGProps<SVGSVGElement> & { className?: string },
) => {
  return (
    <svg width="37" height="18" viewBox="0 0 37 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M0.53418 1.00024C0.53418 0.44796 0.981895 0.000244141 1.53418 0.000244141H35.5342C36.0865 0.000244141 36.5342 0.447959 36.5342 1.00024V17.0002C36.5342 17.5525 36.0865 18.0002 35.5342 18.0002H1.53418C0.981895 18.0002 0.53418 17.5525 0.53418 17.0002V1.00024Z" fill="#27282C" />
      <path d="M33.5342 12.1V12.979H32.3928V16.6041H31.3434V12.979H30.2019V12.1H33.5342Z" fill="white" />
      <path d="M25.5825 14.3457C25.5825 13.9008 25.6746 13.5052 25.8587 13.1587C26.0428 12.8079 26.2985 12.5363 26.6258 12.3438C26.9572 12.1471 27.3315 12.0487 27.7488 12.0487C28.2602 12.0487 28.698 12.1899 29.0621 12.4722C29.4262 12.7545 29.6697 13.1394 29.7924 13.6271H28.6387C28.5528 13.4389 28.43 13.2956 28.2705 13.1972C28.115 13.0988 27.937 13.0496 27.7366 13.0496C27.4134 13.0496 27.1515 13.1672 26.951 13.4025C26.7506 13.6378 26.6503 13.9522 26.6503 14.3457C26.6503 14.7392 26.7506 15.0536 26.951 15.2888C27.1515 15.5241 27.4134 15.6417 27.7366 15.6417C27.937 15.6417 28.115 15.5925 28.2705 15.4942C28.43 15.3958 28.5528 15.2525 28.6387 15.0643H29.7924C29.6697 15.5519 29.4262 15.9369 29.0621 16.2192C28.698 16.4972 28.2602 16.6362 27.7488 16.6362C27.3315 16.6362 26.9572 16.54 26.6258 16.3475C26.2985 16.1507 26.0428 15.8791 25.8587 15.5327C25.6746 15.1862 25.5825 14.7905 25.5825 14.3457Z" fill="white" />
      <path d="M23.4896 12.979V13.8901H24.8949V14.737H23.4896V15.7251H25.079V16.6041H22.4402V12.1H25.079V12.979H23.4896Z" fill="white" />
      <path d="M21.6795 16.6041H20.6301L18.875 13.8259V16.6041H17.8256V12.1H18.875L20.6301 14.891V12.1H21.6795V16.6041Z" fill="white" />
      <path d="M17.0649 16.6041H16.0155L14.2603 13.8259V16.6041H13.2109V12.1H14.2603L16.0155 14.891V12.1H17.0649V16.6041Z" fill="white" />
      <path d="M10.4239 16.6491C10.0189 16.6491 9.64657 16.5507 9.30699 16.3539C8.97151 16.1572 8.70354 15.8834 8.50307 15.5327C8.30669 15.1776 8.2085 14.7798 8.2085 14.3393C8.2085 13.8987 8.30669 13.503 8.50307 13.1523C8.70354 12.8015 8.97151 12.5278 9.30699 12.331C9.64657 12.1343 10.0189 12.0359 10.4239 12.0359C10.8289 12.0359 11.1992 12.1343 11.5347 12.331C11.8742 12.5278 12.1402 12.8015 12.3325 13.1523C12.5288 13.503 12.627 13.8987 12.627 14.3393C12.627 14.7798 12.5288 15.1776 12.3325 15.5327C12.1361 15.8834 11.8702 16.1572 11.5347 16.3539C11.1992 16.5507 10.8289 16.6491 10.4239 16.6491ZM10.4239 15.6482C10.7676 15.6482 11.0417 15.5284 11.2462 15.2889C11.4549 15.0493 11.5592 14.7328 11.5592 14.3393C11.5592 13.9415 11.4549 13.6249 11.2462 13.3897C11.0417 13.1502 10.7676 13.0304 10.4239 13.0304C10.0761 13.0304 9.79794 13.148 9.58929 13.3833C9.38473 13.6185 9.28245 13.9372 9.28245 14.3393C9.28245 14.7371 9.38473 15.0557 9.58929 15.2953C9.79794 15.5305 10.0761 15.6482 10.4239 15.6482Z" fill="white" />
      <path d="M3.53418 14.3457C3.53418 13.9008 3.62623 13.5052 3.81034 13.1587C3.99444 12.8079 4.25015 12.5363 4.57745 12.3438C4.90884 12.1471 5.28319 12.0487 5.70049 12.0487C6.2119 12.0487 6.64966 12.1899 7.01378 12.4722C7.3779 12.7545 7.62133 13.1394 7.74407 13.6271H6.59034C6.50442 13.4389 6.38168 13.2956 6.22213 13.1972C6.06666 13.0988 5.88869 13.0496 5.68822 13.0496C5.36501 13.0496 5.10317 13.1672 4.9027 13.4025C4.70223 13.6378 4.60199 13.9522 4.60199 14.3457C4.60199 14.7392 4.70223 15.0536 4.9027 15.2888C5.10317 15.5241 5.36501 15.6417 5.68822 15.6417C5.88869 15.6417 6.06666 15.5925 6.22213 15.4942C6.38168 15.3958 6.50442 15.2525 6.59034 15.0643H7.74407C7.62133 15.5519 7.3779 15.9369 7.01378 16.2192C6.64966 16.4972 6.2119 16.6362 5.70049 16.6362C5.28319 16.6362 4.90884 16.54 4.57745 16.3475C4.25015 16.1507 3.99444 15.8791 3.81034 15.5327C3.62623 15.1862 3.53418 14.7905 3.53418 14.3457Z" fill="white" />
      <path fillRule="evenodd" clipRule="evenodd" d="M28.4891 9.3327C28.9309 9.51797 29.4119 9.61061 29.9321 9.61061C30.4523 9.61061 30.9297 9.51797 31.3644 9.3327C31.8062 9.1403 32.1874 8.87309 32.5081 8.53105C32.8359 8.18901 33.0888 7.7864 33.267 7.32322C33.4451 6.85292 33.5342 6.34342 33.5342 5.79474C33.5342 5.24605 33.4451 4.74012 33.267 4.27694C33.0888 3.81376 32.8359 3.41472 32.5081 3.0798C32.1874 2.73777 31.8062 2.47411 31.3644 2.28884C30.9297 2.09644 30.4523 2.00024 29.9321 2.00024C29.4119 2.00024 28.9309 2.09644 28.4891 2.28884C28.0473 2.47411 27.6661 2.73777 27.3454 3.0798C27.0248 3.41472 26.7754 3.81376 26.5972 4.27694C26.4191 4.74012 26.33 5.24605 26.33 5.79474C26.33 6.34342 26.4191 6.85292 26.5972 7.32322C26.7754 7.7864 27.0248 8.18901 27.3454 8.53105C27.6661 8.87309 28.0473 9.1403 28.4891 9.3327ZM30.8299 7.62251C30.5805 7.79353 30.2812 7.87903 29.9321 7.87903C29.59 7.87903 29.2908 7.79353 29.0342 7.62251C28.7848 7.44436 28.5889 7.19852 28.4464 6.88498C28.311 6.57145 28.2433 6.20803 28.2433 5.79474C28.2433 5.38144 28.311 5.02159 28.4464 4.71518C28.5889 4.40164 28.7848 4.15936 29.0342 3.98834C29.2908 3.81732 29.59 3.73182 29.9321 3.73182C30.2812 3.73182 30.5805 3.82089 30.8299 3.99903C31.0793 4.17005 31.2717 4.40877 31.4071 4.71518C31.5496 5.02159 31.6209 5.38144 31.6209 5.79474C31.6209 6.20803 31.5496 6.57145 31.4071 6.88498C31.2717 7.19852 31.0793 7.44436 30.8299 7.62251ZM17.6625 5.80545V9.43961H18.5497H19.4262V7.02397V4.59763C19.6399 5.39572 19.8537 6.2045 20.0675 7.02397C20.2813 7.83631 20.495 8.64152 20.7088 9.43961H21.5211H22.3335C22.5473 8.62727 22.7646 7.8078 22.9855 6.98121C23.2064 6.14749 23.4237 5.32446 23.6375 4.51212V6.98121V9.43961H24.5354H25.4439L25.4225 5.80545L25.4011 2.17129H24.0864H22.761C22.5615 2.89812 22.3584 3.63564 22.1518 4.38385C21.9523 5.12494 21.7527 5.8589 21.5532 6.58573C21.3537 5.8589 21.1506 5.12494 20.944 4.38385C20.7444 3.63564 20.5413 2.89812 20.3347 2.17129H18.9986H17.6625V5.80545ZM13.1743 9.61061C12.6541 9.61061 12.1731 9.51797 11.7313 9.3327C11.2895 9.1403 10.9083 8.87309 10.5876 8.53105C10.267 8.18901 10.0176 7.7864 9.83944 7.32322C9.66129 6.85292 9.57222 6.34342 9.57222 5.79474C9.57222 5.24605 9.66129 4.74012 9.83944 4.27694C10.0176 3.81376 10.267 3.41472 10.5876 3.0798C10.9083 2.73777 11.2895 2.47411 11.7313 2.28884C12.1731 2.09644 12.6541 2.00024 13.1743 2.00024C13.6945 2.00024 14.1719 2.09644 14.6066 2.28884C15.0484 2.47411 15.4296 2.73777 15.7503 3.0798C16.0781 3.41472 16.331 3.81376 16.5092 4.27694C16.6873 4.74012 16.7764 5.24605 16.7764 5.79474C16.7764 6.34342 16.6873 6.85292 16.5092 7.32322C16.331 7.7864 16.0781 8.18901 15.7503 8.53105C15.4296 8.87309 15.0484 9.1403 14.6066 9.3327C14.1719 9.51797 13.6945 9.61061 13.1743 9.61061ZM13.1743 7.87903C13.5235 7.87903 13.8228 7.79353 14.0722 7.62251C14.3216 7.44436 14.514 7.19852 14.6494 6.88498C14.7919 6.57145 14.8631 6.20803 14.8631 5.79474C14.8631 5.38144 14.7919 5.02159 14.6494 4.71518C14.514 4.40877 14.3216 4.17005 14.0722 3.99903C13.8228 3.82089 13.5235 3.73182 13.1743 3.73182C12.8323 3.73182 12.533 3.81732 12.2765 3.98834C12.0271 4.15936 11.8311 4.40164 11.6886 4.71518C11.5532 5.02159 11.4855 5.38144 11.4855 5.79474C11.4855 6.20803 11.5532 6.57145 11.6886 6.88498C11.8311 7.19852 12.0271 7.44436 12.2765 7.62251C12.533 7.79353 12.8323 7.87903 13.1743 7.87903ZM5.18024 6.66055V9.43961H6.12084H7.05076V6.66055V3.8708H7.87379H8.68614V3.02639V2.17129H6.11016H3.53418V3.02639V3.8708H4.35721H5.18024V6.66055Z" fill="white" />
    </svg>
  );
};
