import { memo } from 'react';
import { useLocalize } from '~/hooks';

interface DragDropOverlayProps {
  isActive: boolean;
}

const DragDropOverlay = memo(({ isActive }: DragDropOverlayProps) => {
  const localize = useLocalize();
  return (
    <>
      {/** Modal backdrop overlay */}
      <div
        className={`fixed inset-0 z-[9998] transition-opacity duration-200 ease-in-out ${
          isActive
            ? 'pointer-events-auto visible opacity-100'
            : 'pointer-events-none invisible opacity-0'
        } `}
        style={{
          /** Semi-transparent black overlay that works in both themes */
          backgroundColor: 'rgba(0, 0, 0, 0.4)',
          willChange: 'opacity',
        }}
      />
      {/** Main content overlay */}
      <div
        className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-2 text-text-primary transition-all duration-200 ease-in-out ${
          isActive
            ? 'pointer-events-auto visible opacity-100'
            : 'pointer-events-none invisible opacity-0'
        } `}
        style={{
          transform: isActive ? 'scale(1)' : 'scale(0.95)',
          /** Use will-change to hint browser about upcoming changes */
          willChange: 'opacity, transform',
        }}
      >
        {/** Content area with subtle background */}
        <div className="bg-surface-primary/95 flex flex-col items-center rounded-lg p-8 shadow-xl">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 132 108"
            fill="none"
            width="132"
            height="108"
            style={{
              transform: isActive ? 'translateY(0)' : 'translateY(-10px)',
              transition: 'transform 0.2s ease-in-out',
            }}
          >
            <g clipPath="url(#clip0_3605_64419)">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M25.2025 29.3514C10.778 33.2165 8.51524 37.1357 11.8281 49.4995L13.4846 55.6814C16.7975 68.0453 20.7166 70.308 35.1411 66.443L43.3837 64.2344C57.8082 60.3694 60.0709 56.4502 56.758 44.0864L55.1016 37.9044C51.7887 25.5406 47.8695 23.2778 33.445 27.1428L29.3237 28.2471L25.2025 29.3514ZM18.1944 42.7244C18.8572 41.5764 20.325 41.1831 21.4729 41.8459L27.3517 45.24C28.4996 45.9027 28.8929 47.3706 28.2301 48.5185L24.836 54.3972C24.1733 55.5451 22.7054 55.9384 21.5575 55.2757C20.4096 54.613 20.0163 53.1451 20.6791 51.9972L22.8732 48.1969L19.0729 46.0028C17.925 45.3401 17.5317 43.8723 18.1944 42.7244ZM29.4091 56.3843C29.066 55.104 29.8258 53.7879 31.1062 53.4449L40.3791 50.9602C41.6594 50.6172 42.9754 51.377 43.3184 52.6573C43.6615 53.9376 42.9017 55.2536 41.6214 55.5967L32.3485 58.0813C31.0682 58.4244 29.7522 57.6646 29.4091 56.3843Z"
                fill="#AFC1FF"
              />
            </g>
            <g clipPath="url(#clip1_3605_64419)">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M86.8124 13.4036C81.0973 11.8722 78.5673 13.2649 77.0144 19.0603L68.7322 49.97C67.1793 55.7656 68.5935 58.2151 74.4696 59.7895L97.4908 65.958C103.367 67.5326 105.816 66.1184 107.406 60.1848L115.393 30.379C115.536 29.8456 115.217 29.2959 114.681 29.16C113.478 28.8544 112.435 28.6195 111.542 28.4183C106.243 27.2253 106.22 27.2201 109.449 20.7159C109.73 20.1507 109.426 19.4638 108.816 19.3004L86.8124 13.4036ZM87.2582 28.4311C86.234 28.1567 85.1812 28.7645 84.9067 29.7888C84.6323 30.813 85.2401 31.8658 86.2644 32.1403L101.101 36.1158C102.125 36.3902 103.178 35.7824 103.453 34.7581C103.727 33.7339 103.119 32.681 102.095 32.4066L87.2582 28.4311ZM82.9189 37.2074C83.1934 36.1831 84.2462 35.5753 85.2704 35.8497L100.107 39.8252C101.131 40.0996 101.739 41.1524 101.465 42.1767C101.19 43.201 100.137 43.8088 99.1132 43.5343L84.2766 39.5589C83.2523 39.2844 82.6445 38.2316 82.9189 37.2074ZM83.2826 43.2683C82.2584 42.9939 81.2056 43.6017 80.9311 44.626C80.6567 45.6502 81.2645 46.703 82.2888 46.9775L89.7071 48.9652C90.7313 49.2396 91.7841 48.6318 92.0586 47.6076C92.333 46.5833 91.7252 45.5305 90.7009 45.256L83.2826 43.2683Z"
                fill="#7989FF"
              />
            </g>
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M40.4004 71.8426C40.4004 57.2141 44.0575 53.5569 61.1242 53.5569H66.0004H70.8766C87.9432 53.5569 91.6004 57.2141 91.6004 71.8426V79.1569C91.6004 93.7855 87.9432 97.4426 70.8766 97.4426H61.1242C44.0575 97.4426 40.4004 93.7855 40.4004 79.1569V71.8426ZM78.8002 67.4995C78.8002 70.1504 76.6512 72.2995 74.0002 72.2995C71.3492 72.2995 69.2002 70.1504 69.2002 67.4995C69.2002 64.8485 71.3492 62.6995 74.0002 62.6995C76.6512 62.6995 78.8002 64.8485 78.8002 67.4995ZM60.7204 70.8597C60.2672 70.2553 59.5559 69.8997 58.8004 69.8997C58.045 69.8997 57.3337 70.2553 56.8804 70.8597L47.2804 83.6597C46.4851 84.72 46.7 86.2244 47.7604 87.0197C48.8208 87.8149 50.3251 87.6 51.1204 86.5397L58.8004 76.2997L66.4804 86.5397C66.8979 87.0962 67.5363 87.4443 68.2303 87.4936C68.9243 87.5429 69.6055 87.2887 70.0975 86.7967L74.8004 82.0938L79.5034 86.7967C80.4406 87.734 81.9602 87.734 82.8975 86.7967C83.8347 85.8595 83.8347 84.3399 82.8975 83.4026L76.4975 77.0026C75.5602 76.0653 74.0406 76.0653 73.1034 77.0026L68.6601 81.4459L60.7204 70.8597Z"
              fill="#3C46FF"
            />
            <defs>
              <clipPath id="clip0_3605_64419">
                <rect
                  width="56"
                  height="56"
                  fill="white"
                  transform="translate(0 26.9939) rotate(-15)"
                />
              </clipPath>
              <clipPath id="clip1_3605_64419">
                <rect
                  width="64"
                  height="64"
                  fill="white"
                  transform="translate(69.5645 0.5) rotate(15)"
                />
              </clipPath>
            </defs>
          </svg>
          <h3 className="mt-4 text-lg font-semibold">{localize('com_ui_upload_files')}</h3>
          <h4 className="text-sm text-text-secondary">{localize('com_ui_drag_drop')}</h4>
        </div>
      </div>
    </>
  );
});

DragDropOverlay.displayName = 'DragDropOverlay';

export default DragDropOverlay;