import React, { useMemo } from 'react';
import { palette, useDarkMode } from '@mongodb-js/compass-components';

const ZeroGraphic: 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="M68 20H4V12.1C4 10.9 4.9 10 6.1 10H65.9C67.1 10 68 10.9 68 12.1V20Z"
        fill={palette.green.base}
      />
      <path
        d="M40 56H32C31.4 56 31 55.6 31 55V47C31 46.4 31.4 46 32 46H40C40.6 46 41 46.4 41 47V55C41 55.6 40.6 56 40 56Z"
        fill={palette.green.base}
      />
      <path
        d="M58 56H50C49.4 56 49 55.6 49 55V47C49 46.4 49.4 46 50 46H58C58.6 46 59 46.4 59 47V55C59 55.6 58.5 56 58 56Z"
        fill={palette.green.base}
      />
      <path
        d="M22 56H14C13.4 56 13 55.6 13 55V47C13 46.4 13.4 46 14 46H22C22.6 46 23 46.4 23 47V55C23 55.6 22.6 56 22 56Z"
        fill={palette.green.base}
      />
      <path
        d="M40 36H32C31.4 36 31 35.6 31 35V27C31 26.4 31.4 26 32 26H40C40.6 26 41 26.4 41 27V35C41 35.6 40.6 36 40 36Z"
        fill={palette.green.base}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M22.0261 31.5C20.0984 31.5 18.5203 33.0768 18.5203 35V45.5H22C22.4136 45.5 22.7972 45.6401 23.0786 45.9214C23.3599 46.2028 23.5 46.5864 23.5 47V55C23.5 55.4136 23.3599 55.7972 23.0786 56.0786C22.7972 56.3599 22.4136 56.5 22 56.5H14C13.5864 56.5 13.2028 56.3599 12.9214 56.0786C12.6401 55.7972 12.5 55.4136 12.5 55V47C12.5 46.5864 12.6401 46.2028 12.9214 45.9214C13.2028 45.6401 13.5864 45.5 14 45.5H17.5203V35C17.5203 32.5232 19.5475 30.5 22.0261 30.5H30.5V27C30.5 26.5864 30.6401 26.2028 30.9214 25.9214C31.2028 25.6401 31.5864 25.5 32 25.5H40C40.4136 25.5 40.7972 25.6401 41.0786 25.9214C41.3599 26.2028 41.5 26.5864 41.5 27V30.5H50.0666C52.5452 30.5 54.5724 32.5232 54.5724 35V45.5H58C58.4136 45.5 58.7972 45.6401 59.0786 45.9214C59.3599 46.2028 59.5 46.5864 59.5 47V55C59.5 55.9081 58.7431 56.5 58 56.5H50C49.5864 56.5 49.2028 56.3599 48.9214 56.0786C48.6401 55.7972 48.5 55.4136 48.5 55V47C48.5 46.5864 48.6401 46.2028 48.9214 45.9214C49.2028 45.6401 49.5864 45.5 50 45.5H53.5724V35C53.5724 33.0768 51.9943 31.5 50.0666 31.5H41.5V35C41.5 35.4136 41.3599 35.7972 41.0786 36.0786C40.7972 36.3599 40.4136 36.5 40 36.5H36.5463V45.5H40C40.4136 45.5 40.7972 45.6401 41.0786 45.9214C41.3599 46.2028 41.5 46.5864 41.5 47V55C41.5 55.4136 41.3599 55.7972 41.0786 56.0786C40.7972 56.3599 40.4136 56.5 40 56.5H32C31.5864 56.5 31.2028 56.3599 30.9214 56.0786C30.6401 55.7972 30.5 55.4136 30.5 55V47C30.5 46.5864 30.6401 46.2028 30.9214 45.9214C31.2028 45.6401 31.5864 45.5 32 45.5H35.5463V36.5H32C31.5864 36.5 31.2028 36.3599 30.9214 36.0786C30.6401 35.7972 30.5 35.4136 30.5 35V31.5H22.0261ZM13.6286 46.6286C13.5599 46.6972 13.5 46.8136 13.5 47V55C13.5 55.1864 13.5599 55.3028 13.6286 55.3714C13.6972 55.4401 13.8136 55.5 14 55.5H22C22.1864 55.5 22.3028 55.4401 22.3714 55.3714C22.4401 55.3028 22.5 55.1864 22.5 55V47C22.5 46.8136 22.4401 46.6972 22.3714 46.6286C22.3028 46.5599 22.1864 46.5 22 46.5H14C13.8136 46.5 13.6972 46.5599 13.6286 46.6286ZM31.5 47C31.5 46.8136 31.5599 46.6972 31.6286 46.6286C31.6972 46.5599 31.8136 46.5 32 46.5H40C40.1864 46.5 40.3028 46.5599 40.3714 46.6286C40.4401 46.6972 40.5 46.8136 40.5 47V55C40.5 55.1864 40.4401 55.3028 40.3714 55.3714C40.3028 55.4401 40.1864 55.5 40 55.5H32C31.8136 55.5 31.6972 55.4401 31.6286 55.3714C31.5599 55.3028 31.5 55.1864 31.5 55V47ZM49.5 47C49.5 46.8136 49.5599 46.6972 49.6286 46.6286C49.6972 46.5599 49.8136 46.5 50 46.5H58C58.1864 46.5 58.3028 46.5599 58.3714 46.6286C58.4401 46.6972 58.5 46.8136 58.5 47V55C58.5 55.2919 58.2569 55.5 58 55.5H50C49.8136 55.5 49.6972 55.4401 49.6286 55.3714C49.5599 55.3028 49.5 55.1864 49.5 55V47ZM31.6286 26.6286C31.5599 26.6972 31.5 26.8136 31.5 27V35C31.5 35.1864 31.5599 35.3028 31.6286 35.3714C31.6972 35.4401 31.8136 35.5 32 35.5H40C40.1864 35.5 40.3028 35.4401 40.3714 35.3714C40.4401 35.3028 40.5 35.1864 40.5 35V27C40.5 26.8136 40.4401 26.6972 40.3714 26.6286C40.3028 26.5599 40.1864 26.5 40 26.5H32C31.8136 26.5 31.6972 26.5599 31.6286 26.6286Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M68.4924 20.0874V59.8802C68.6047 61.3687 67.4693 62.5 66.0896 62.5H6.00289C4.62584 62.5 3.5 61.3768 3.5 60V12C3.5 10.6232 4.62584 9.5 6.00289 9.5H65.9895C67.3016 9.5 68.3857 10.5198 68.485 11.807C68.4949 11.9029 68.5 12.0007 68.5 12.1V20C68.5 20.0298 68.4974 20.059 68.4924 20.0874ZM4.5 12.1C4.5 11.1761 5.17614 10.5 6.1 10.5H65.9C66.7548 10.5 67.3976 11.0789 67.4889 11.8972C67.4912 11.9312 67.4924 11.9655 67.4924 12V19.5H4.5V12.1ZM4.5 20.5H67.4924V59.9C67.4924 59.9139 67.493 59.9278 67.4941 59.9416C67.5693 60.8423 66.9065 61.5 66.0896 61.5H6.00289C5.17676 61.5 4.5 60.8232 4.5 60V20.5Z"
        fill={fillColor}
      />
    </svg>
  );
};

export { ZeroGraphic };
