import { palette } from '@leafygreen-ui/palette';
import React, { useMemo } from 'react';

import { useDarkMode } from '../../hooks/use-theme';

const DocumentIcon: React.FunctionComponent = () => {
  const darkMode = useDarkMode();

  const fillColor = useMemo(
    () => (darkMode ? palette.white : palette.black),
    [darkMode]
  );

  return (
    <svg
      width="72"
      height="72"
      viewBox="0 0 72 72"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M62 19.995H48C46.9 19.995 46 19.095 46 17.995V3.995L62 19.995Z"
        fill={palette.green.base}
      />
      <path d="M36.5 49.545H17.5V50.545H36.5V49.545Z" fill={fillColor} />
      <path d="M54.5 40.545H17.5V41.545H54.5V40.545Z" fill={fillColor} />
      <path d="M54.5 31.545H17.5V32.545H54.5V31.545Z" fill={fillColor} />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 55.185C10.28 55.185 10.5 54.965 10.5 54.685V47.215C10.5 46.935 10.28 46.715 10 46.715C9.72 46.715 9.5 46.935 9.5 47.215V54.685C9.5 54.965 9.72 55.185 10 55.185Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M16.08 67.495H12.1C11.99 67.495 11.88 67.485 11.77 67.465C11.75 67.465 11.73 67.455 11.71 67.445C11.21 67.315 10.81 66.955 10.62 66.505C10.54 66.315 10.5 66.105 10.5 65.895V62.155C10.5 61.875 10.28 61.655 10 61.655C9.72 61.655 9.5 61.875 9.5 62.155V65.895C9.5 66.065 9.52 66.235 9.55 66.405C9.57 66.485 9.6 66.555 9.62 66.635C9.65 66.715 9.66 66.805 9.7 66.885V66.905C9.96 67.515 10.45 68.025 11.08 68.285C11.16 68.325 11.25 68.345 11.34 68.375C11.41 68.395 11.48 68.425 11.55 68.445C11.72 68.485 11.9 68.495 12.08 68.495H16.06C16.34 68.495 16.56 68.275 16.56 67.995C16.56 67.715 16.34 67.495 16.06 67.495H16.08Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 40.235C10.28 40.235 10.5 40.015 10.5 39.735V32.265C10.5 31.985 10.28 31.765 10 31.765C9.72 31.765 9.5 31.985 9.5 32.265V39.735C9.5 40.015 9.72 40.235 10 40.235Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M24.81 4.495H33.28C33.56 4.495 33.78 4.275 33.78 3.995C33.78 3.715 33.56 3.495 33.28 3.495H24.81C24.53 3.495 24.31 3.715 24.31 3.995C24.31 4.275 24.53 4.495 24.81 4.495Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M16.34 3.495H12.1C11.93 3.495 11.76 3.515 11.59 3.545C11.51 3.565 11.44 3.595 11.36 3.615C11.28 3.645 11.19 3.655 11.11 3.695H11.1C11.1 3.695 11.1 3.705 11.09 3.705C10.48 3.965 9.97 4.455 9.71 5.085C9.68 5.175 9.66 5.265 9.63 5.355C9.61 5.425 9.58 5.49499 9.56 5.565C9.52 5.735 9.51 5.91499 9.51 6.095V9.835C9.51 10.115 9.73 10.335 10.01 10.335C10.29 10.335 10.51 10.115 10.51 9.835V6.095C10.51 5.985 10.52 5.87499 10.54 5.765C10.54 5.745 10.55 5.725 10.56 5.705C10.69 5.205 11.05 4.805 11.5 4.615C11.69 4.535 11.9 4.495 12.11 4.495H16.34C16.62 4.495 16.84 4.275 16.84 3.995C16.84 3.715 16.62 3.495 16.34 3.495Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 25.285C10.28 25.285 10.5 25.065 10.5 24.785V17.315C10.5 17.035 10.28 16.815 10 16.815C9.72 16.815 9.5 17.035 9.5 17.315V24.785C9.5 25.065 9.72 25.285 10 25.285Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M62 61.575C61.72 61.575 61.5 61.795 61.5 62.075V65.905C61.5 66.015 61.49 66.125 61.47 66.235C61.47 66.255 61.46 66.275 61.45 66.295C61.32 66.795 60.96 67.195 60.51 67.385C60.32 67.465 60.11 67.505 59.9 67.505H55.92C55.64 67.505 55.42 67.725 55.42 68.005C55.42 68.285 55.64 68.505 55.92 68.505H59.9C60.07 68.505 60.24 68.485 60.41 68.455C60.49 68.435 60.56 68.405 60.64 68.385C60.72 68.355 60.81 68.345 60.89 68.305H60.9C60.9 68.305 60.9 68.295 60.91 68.295C61.52 68.035 62.03 67.545 62.29 66.915C62.32 66.825 62.34 66.735 62.37 66.645C62.39 66.575 62.42 66.505 62.43 66.435C62.47 66.265 62.48 66.085 62.48 65.905V62.075C62.48 61.795 62.26 61.575 61.98 61.575H62Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M62 46.275C61.72 46.275 61.5 46.495 61.5 46.775V54.425C61.5 54.705 61.72 54.925 62 54.925C62.28 54.925 62.5 54.705 62.5 54.425V46.775C62.5 46.495 62.28 46.275 62 46.275Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M62 30.965C61.72 30.965 61.5 31.185 61.5 31.465V39.115C61.5 39.395 61.72 39.615 62 39.615C62.28 39.615 62.5 39.395 62.5 39.115V31.465C62.5 31.185 62.28 30.965 62 30.965Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M32.02 67.495H24.05C23.77 67.495 23.55 67.715 23.55 67.995C23.55 68.275 23.77 68.495 24.05 68.495H32.02C32.3 68.495 32.52 68.275 32.52 67.995C32.52 67.715 32.3 67.495 32.02 67.495Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M62.49 19.935C62.49 19.935 62.49 19.895 62.48 19.875C62.46 19.795 62.42 19.715 62.36 19.645L46.35 3.645C46.29 3.585 46.21 3.545 46.12 3.525C46.1 3.525 46.08 3.525 46.06 3.515C46.04 3.515 46.02 3.505 46 3.505H41.76C41.48 3.505 41.26 3.725 41.26 4.005C41.26 4.285 41.48 4.505 41.76 4.505H45.5V17.995C45.5 19.375 46.62 20.495 48 20.495H61.5V23.825C61.5 24.105 61.72 24.325 62 24.325C62.28 24.325 62.5 24.105 62.5 23.825V19.995C62.5 19.995 62.5 19.955 62.49 19.935ZM48 19.495C47.18 19.495 46.5 18.815 46.5 17.995V5.205L60.8 19.505H48.01L48 19.495Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M47.95 67.495H39.98C39.7 67.495 39.48 67.715 39.48 67.995C39.48 68.275 39.7 68.495 39.98 68.495H47.95C48.23 68.495 48.45 68.275 48.45 67.995C48.45 67.715 48.23 67.495 47.95 67.495Z"
        fill={fillColor}
      />
    </svg>
  );
};

export { DocumentIcon };