'use client';

import {
  Box,
  Divider,
  Modal,
  ModalBody,
  ModalContent,
  ModalOverlay,
  Stack,
  Text,
} from '@chakra-ui/react';
import { marked } from 'marked';
import { observer } from 'mobx-react-lite';
import React from 'react';

import { formatDate } from '@//utils/utils';
import CloseButton from '@/components/button/CloseButton';
import Link from '@/components/link/Link';
import { ChangelogItem } from '@/hooks/datoClient';
import { capitalizeFirstLetter } from '@/utils/constants';

interface ChangelogProps {
  isOpen: boolean;
  onClose: () => void;
  changelogItems: ChangelogItem[];
}

const ChangelogModal: React.FC<ChangelogProps> = observer(
  ({ isOpen, onClose, changelogItems }: ChangelogProps) => {
    return (
      <Modal isOpen={isOpen} onClose={onClose} isCentered size='2xl'>
        <ModalOverlay />
        <ModalContent
          bg={'var(--color-background-primary)'}
          borderRadius='32px'
        >
          <div className='flex items-center justify-between px-3'>
            <span className='pt-16 pl-12 font-serif text-3xl'>
              What&apos;s New?
            </span>
            <div className='-mt-8'>
              <CloseButton onClick={onClose} />
            </div>
          </div>
          <Divider mt={8} mb={2} mx={16} w={540} />

          <ModalBody p={0} h='75%' maxHeight={'600px'} display='flex'>
            <Stack
              py={2}
              px={0}
              spacing={[2, 2, 0]}
              flexDirection={'column'}
              overflow={'auto'}
              flex='1'
              w='100%'
            >
              {changelogItems.map((changelogItem: any, index: number) => {
                const {
                  title,
                  datetime,
                  description,
                  tags,
                  linkUrl,
                  linkText,
                } = changelogItem;
                const tagList =
                  tags && tags.length
                    ? tags.split(',').map((t: string) => t.trim())
                    : [];
                return (
                  <Box px={16} pb={8} pt={4} key={index}>
                    <span className='mb-10 font-serif text-2xl font-normal'>
                      {title}
                    </span>
                    <div className='my-4 flex flex-row flex-wrap items-center gap-2'>
                      {tagList.map((tag: string, tagIndex: number) => (
                        <span
                          className='relative mr-4 inline-flex h-6 items-center justify-center rounded-md px-2 font-sans text-sm font-medium text-foreground-primary-on-dark'
                          style={{
                            backgroundImage:
                              "url('https://cdn-o.suno.com/auras/orange-aura.png')",
                            backgroundSize: 'cover',
                            backgroundRepeat: 'no-repeat',
                          }}
                          key={`${tagIndex}_${tag}`}
                        >
                          <span
                            className='absolute inset-0 rounded-md bg-black opacity-40'
                            style={{ zIndex: 1 }}
                          ></span>
                          <span className='relative' style={{ zIndex: 2 }}>
                            {capitalizeFirstLetter(tag)}
                          </span>
                        </span>
                      ))}
                      <span className='mr-2 font-sans text-sm font-normal tracking-wide'>
                        {formatDate(new Date(datetime))}
                      </span>
                    </div>

                    <Text
                      sx={{
                        '& a': {
                          textDecoration: 'underline',
                        },
                      }}
                      dangerouslySetInnerHTML={{
                        __html: description
                          ? (marked.parse(description) as string)
                          : '',
                      }}
                      className='text-16px font-sans font-normal'
                    />
                    {linkUrl && linkText && (
                      <Box mt={4}>
                        <Link className='underline' href={linkUrl}>
                          {linkText}
                        </Link>
                      </Box>
                    )}
                    <Divider mt={8} mb={8} />
                  </Box>
                );
              })}
            </Stack>
          </ModalBody>
        </ModalContent>
      </Modal>
    );
  }
);

export default ChangelogModal;