import { Fragment, useEffect, useState } from 'react';

import type { CountdownTime } from './types';

import Box from '~/src/components/Box';
import Divider from '~/src/components/Divider';
import Loading from '~/src/components/Loading';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import { capitalize } from '~/src/lib/utils/string';
import SectionTitle from '../lib/SectionTitle';
import { getDisplayTime, getRemainingTime } from './utils';

export const CountdownSectionView = ({
  title,
  releaseTimestamp,
}: {
  title?: string;
  releaseTimestamp: number;
}) => {
  const i18n = useI18n();
  const [time, setTime] = useState<CountdownTime | undefined>();

  useEffect(() => {
    const updateCountdown = () => {
      const time = getRemainingTime(releaseTimestamp);
      setTime(time);
    };

    updateCountdown();
    const interval = setInterval(updateCountdown, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [releaseTimestamp]);

  return (
    <Box testId="countdownSection">
      <SectionTitle minHeight="3.5rem" text={title} />
      <Box
        flexBox
        centerContent
        padding="1.2rem"
        style={{ userSelect: 'none' }}
      >
        {time ? (
          getDisplayTime(time, i18n).map(
            ({ id, value, label }, index, array) => {
              const isLast = index === array.length - 1;

              return (
                <Fragment key={id}>
                  <Box
                    testId={`countdownUnit${capitalize(id, { type: 'first' })}`}
                    flexColumn
                    noFlexShrink
                    centerContent
                  >
                    <Text
                      size="4rem"
                      lineHeight={1}
                      weight="bold"
                      margin="0 0 0.75rem"
                    >
                      {value.toString().padStart(2, '0')}
                    </Text>
                    <Text
                      title={label}
                      maxWidth="7rem"
                      size="1.3rem"
                      opacity={0.75}
                      withEllipsis
                    >
                      {capitalize(label, { type: 'first' })}
                    </Text>
                  </Box>
                  {isLast ? null : (
                    <Divider
                      direction="vertical"
                      height="3rem"
                      style={{ marginInline: '2rem' }}
                    />
                  )}
                </Fragment>
              );
            }
          )
        ) : (
          <Box padding="2rem 0">
            <Loading size="2.3rem" />
          </Box>
        )}
      </Box>
    </Box>
  );
};