/* eslint-disable tsdoc/syntax -- template 이름 표기법 허용 */
import React, { useMemo } from 'react';
import { Heading } from '@/atoms/heading';
import { List } from '@/atoms/list';
import { Typo } from '@/atoms/typo';

export type OneOnOneGuideData =
  | {
      type: 'title';
      value: string;
    }
  | { type: 'ul'; value: string[] }
  | {
      type: 'text';
      value: string;
    };

export interface OneOnOneGuideListProps {
  data?: OneOnOneGuideData[];
  relacements?: {
    /** {{Subject_Name}} 에 대치되는 값 */
    userName?: string;
    /** {{Template_Name}} 에 대치되는 값 */
    templateName?: string;
  };
  guideTitle?: string;
  guideDescription?: string;
}

export const oneOnOneNoteTextReplacer = (args: {
  text: string;
  userName: string;
  templateName: string;
}): string => {
  const { text, userName, templateName } = args;
  return text
    .replace(/\{\{Template_Name\}\}/g, templateName)
    .replace(/\{\{Subject_Name\}\}/g, userName);
};

export function OneOnOneGuideList(
  props: OneOnOneGuideListProps
): React.ReactElement {
  const { data, relacements, guideTitle, guideDescription } = props;

  const groupedData = useMemo(() => {
    return data?.reduce(
      (acc, item) => {
        if (item.type === 'title') {
          acc.push({ title: item.value, children: [] });
        } else {
          acc[acc.length - 1].children.push(item);
        }
        return acc;
      },
      [] as { title: string; children: OneOnOneGuideData[] }[]
    );
  }, [data]);

  return (
    <>
      <Heading mb="2" variant="heading5">
        {oneOnOneNoteTextReplacer({
          text: guideTitle || '',
          userName: relacements?.userName || '',
          templateName: relacements?.templateName || '',
        })}
      </Heading>
      <Typo as="div" mb="4">
        {oneOnOneNoteTextReplacer({
          text: guideDescription || '',
          userName: relacements?.userName || '팀원',
          templateName: relacements?.templateName || '1on1',
        })}
      </Typo>

      <List.Root
        preSpace="small"
        style={{ fontWeight: 'bold', gap: 'var(--space-5)' }}
        variant="ol"
      >
        {groupedData?.map((item) => {
          return (
            <List.Item key={item.title}>
              <Typo as="div" mb="1">
                {item.title}
              </Typo>
              {item.children.map((child) => {
                if (child.type === 'ul') {
                  return (
                    <List.Root
                      key={child.value[0]}
                      preSpace="small"
                      style={{ fontWeight: 'normal', gap: 'var(--space-2)' }}
                      variant="ul"
                    >
                      {child.value.map((el) => {
                        return <List.Item key={el}>{el}</List.Item>;
                      })}
                    </List.Root>
                  );
                }
                if (typeof child.value === 'string') {
                  return (
                    <Typo as="div" key={child.value} mb="2" weight="regular">
                      {child.value}
                    </Typo>
                  );
                }
                return null;
              })}
            </List.Item>
          );
        })}
      </List.Root>
    </>
  );
}
