'use client';

import * as TabsPrimitive from '@radix-ui/react-tabs';
import { useTheme } from 'next-themes';
import type { FC } from 'react';

import Button from '@/components/Common/Button';
import CodeBox from '@/components/Common/CodeBox';
import CodeTabs from '@/components/Common/CodeTabs';
import WithFooter from '@/components/withFooter';
import WithNavBar from '@/components/withNavBar';
import { useDetectOS } from '@/hooks';
import { useRouter } from '@/navigation.mjs';

const nvmContent = `# Install Node Version Manager (NVM)\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash\n\n# Install Node.js\nnvm install --lts\n\n# Check that Node is installed\nnode -v\n\n# Check your NPM version\nnpm -v`;
const chocoContent = `# Install Chocolatey\nSet-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))\n\n# Install Node.js\nchoco install nodejs-lts\n\n# Check that Node is installed\nnode -v\n\n# Check your NPM version\nnpm -v`;

const downloadTabs = [
  { key: 'nvm', label: 'macOS / Linux (nvm)' },
  { key: 'choco', label: 'Windows (Chocolatey)' },
];

const HomeLayout: FC = () => {
  const { os } = useDetectOS();
  const { resolvedTheme } = useTheme();
  const { push } = useRouter();

  return (
    <>
      <WithNavBar />

      <div className="flex flex-row">
        <section>
          {/* code for optional banner TODO */}

          <Button
            onClick={() => push('/download')}
            variant={resolvedTheme === 'dark' ? 'special' : 'primary'}
          >
            {/* this should be i18n */}
            Download Node.js
          </Button>

          <a>
            {/* this should be i18n */}
            Get Started
          </a>
        </section>

        <section>
          <CodeTabs
            tabs={downloadTabs}
            defaultValue={os === 'WIN' ? 'choco' : 'nvm'}
            linkUrl="/download/package-manager"
            linkText="More Options (this should be i18n)"
          >
            <TabsPrimitive.Content value="nvm">
              <CodeBox language="Bash">
                <code>{nvmContent}</code>
              </CodeBox>
            </TabsPrimitive.Content>
            <TabsPrimitive.Content value="choco">
              <CodeBox language="Bash">
                <code>{chocoContent}</code>
              </CodeBox>
            </TabsPrimitive.Content>
          </CodeTabs>

          <span>
            {/* note this should be i18n, including the option of Chocolate or NVM */}
            Copy and paste this snippet to install Node.js LTS via{' '}
            {os === 'WIN' ? 'Chocolatey' : 'NVM'}
          </span>
        </section>
      </div>

      <WithFooter />
    </>
  );
};

export default HomeLayout;