import { Image as TaroImage } from '@tarojs/components';

import { Image } from '@taroify/core';
import { PhotoFail } from '@taroify/icons';
import { useCallback } from 'react';

import SkeletonLoading from '@/components/skeleton-loading';
import { PageUrl } from '@/constants/app';
import { MaterialViewSource, WORK_YEAR_LABELS } from '@/constants/material';
import { AnchorInfo } from '@/types/material';
import { calcDistance } from '@/utils/location';
import { getBasicInfo, getSalary } from '@/utils/material';
import { navigateTo } from '@/utils/route';
import { activeDate } from '@/utils/time';

import './index.less';

interface IProps {
  data: AnchorInfo;
  jobId?: string;
  validator: (onSuccess: () => void) => void;
}

const PREFIX = 'anchor-card';

function AnchorCard(props: IProps) {
  const { data, jobId, validator } = props;
  const style = data.isRead ? ({ '--read-color': '#999999' } as React.CSSProperties) : {};
  const cover = (data.materialVideoInfoList.find(video => video.isDefault) || data.materialVideoInfoList[0])?.coverUrl;

  const handleNavTo = useCallback(() => {
    navigateTo(PageUrl.MaterialView, { jobId, resumeId: data.id, source: MaterialViewSource.AnchorList });
  }, [data, jobId]);

  const handleClick = useCallback(() => {
    validator(handleNavTo);
  }, [handleNavTo, validator]);

  return (
    <div className={PREFIX} style={style} onClick={handleClick}>
      <Image
        lazyLoad
        src={cover}
        width={188}
        height={242}
        mode="aspectFill"
        fallback={<PhotoFail />}
        className={`${PREFIX}__cover`}
        placeholder={<SkeletonLoading customName={`${PREFIX}__cover-skeleton`} />}
      />
      <div className={`${PREFIX}__info-container`}>
        <div className={`${PREFIX}__info`}>
          <div className={`${PREFIX}__info__title`}>{data.name}</div>
          <div className={`${PREFIX}__info__basic`}>{getBasicInfo(data)}</div>
          <div className={`${PREFIX}__info__year`}>{WORK_YEAR_LABELS[data.workedYear] || ''}</div>
          {data.workedSecCategoryStr && (
            <div className={`${PREFIX}__info__categories`}>{`播过 ${data.workedSecCategoryStr}`}</div>
          )}
          <div className={`${PREFIX}__info__salary`}>{getSalary(data)}</div>
        </div>
        <div className={`${PREFIX}__right`}>
          <div className={`${PREFIX}__active-time`}>{activeDate(data.sortTime)}</div>
          {typeof data.distance !== 'undefined' && (
            <div className={`${PREFIX}__distance-wrapper`}>
              <TaroImage className={`${PREFIX}__distance-icon`} src={require('@/statics/svg/location.svg')} />
              <div className={`${PREFIX}__distance`}>{calcDistance(data.distance, 1)}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default AnchorCard;