import type { ProjectStatus } from '@tipp/biz-utils';
import { format } from 'date-fns';
import { CopyIcon } from '@radix-ui/react-icons';
import { Button, DataList } from '../../../atoms';

export interface CoachingCustomerInfoProps {
  customer?: Customer;
  session?: Session;
  children?: React.ReactElement;
  badge?: React.ReactElement;
  onClickCopy: (value: string) => void;
}

export interface Customer {
  username?: string;
  email?: string;
  gender?: string;
  birthdate?: Date;
  phone?: string;
  company?: string;
  team?: string;
  position?: string;
  level: string;
}

export interface Session {
  state?: ProjectStatus;
  totalSession?: number;
  currentSession?: number;
  nextSessionDate?: Date;
  nextSessionType?: string;
  expiredAt?: Date;
}

export interface DataListItems<T> {
  label: string;
  getValue: (original?: T) => string | undefined;
  copyable?: boolean;
  render?: (value?: string) => React.ReactNode;
}

export const infoList: DataListItems<Customer>[] = [
  { label: '이름', getValue: (customer) => customer?.username },
  { label: '성별', getValue: (customer) => customer?.gender },
  {
    label: '생년월일',
    getValue: (customer) =>
      customer?.birthdate && format(customer.birthdate, 'yyyy.MM.dd'),
  },
  { label: '부서', getValue: (customer) => customer?.team },
  { label: '직책', getValue: (customer) => customer?.position },
  { label: '직급', getValue: (customer) => customer?.level },
  { label: '이메일', getValue: (customer) => customer?.email, copyable: true },
  {
    label: '전화번호',
    getValue: (customer) => customer?.phone,
    render: (value) => {
      // 핸드폰 전화번호 형식으로 변환
      return (
        value
          ?.replace(/[^0-9]/g, '')
          // eslint-disable-next-line prefer-named-capture-group -- target es 변경하기 전이라서 이대로 둠
          .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`)
      );
    },
    copyable: true,
  },
];

const sessionStatusChecker = <T,>(value: T, session?: Session): T | string => {
  if (session?.state === 'inProgress') {
    return value;
  }
  return '-';
};

export const sessionList: DataListItems<Session>[] = [
  {
    label: '진행중인 세션',
    getValue: (session) => {
      const { currentSession, totalSession } = session || {};
      if (currentSession && totalSession && currentSession > totalSession) {
        return '-';
      }

      return sessionStatusChecker(
        `${currentSession || '-'}회차/${totalSession || '-'}회차`,
        session
      );
    },
  },
  {
    label: '다음 세션 일시',
    getValue: (session) =>
      sessionStatusChecker(
        session?.nextSessionDate
          ? format(session.nextSessionDate, 'yyyy년 MM월 dd일 HH시 mm분')
          : '-',
        session
      ),
  },
  {
    label: '다음 세션 참여 방식',
    getValue: (session) =>
      sessionStatusChecker(session?.nextSessionType || '-', session),
  },
  {
    label: '코칭 만료 기한',
    getValue: (session) =>
      session?.expiredAt ? format(session.expiredAt, 'yyyy년 MM월 dd일') : '-',
  },
];

export const renderItem = <T extends object>(args: {
  info: DataListItems<T>;
  data?: T;
  onClickCopy: (value: string) => void;
}): JSX.Element => {
  const { info, data, onClickCopy } = args;
  const value = info.getValue(data);
  return (
    <>
      {info.render ? info.render(value) : value || '-'}
      {info.copyable && value ? (
        <CopyButton onClickCopy={onClickCopy} value={value} />
      ) : null}
    </>
  );
};

export const renderDataListItem = <T extends object>(args: {
  info: DataListItems<T>;
  data?: T;
  onClickCopy: (value: string) => void;
}): React.ReactElement => {
  const { info, data, onClickCopy } = args;
  return (
    <DataList.Item key={info.label}>
      <DataList.Label>{info.label}</DataList.Label>
      <DataList.Value>{renderItem({ info, data, onClickCopy })}</DataList.Value>
    </DataList.Item>
  );
};

export function CopyButton(props: {
  value: string;
  onClickCopy: (value: string) => void;
}): JSX.Element {
  const { value, onClickCopy } = props;
  return (
    <Button
      color="gray"
      onClick={() => {
        onClickCopy(value);
      }}
      style={{ marginLeft: '0', marginTop: '0' }}
      variant="transparent"
    >
      <CopyIcon />
    </Button>
  );
}
