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

import classNames from 'classnames';
import { useCallback } from 'react';

import LoginButton from '@/components/login-button';
import { PageUrl } from '@/constants/app';
import { GroupType } from '@/constants/group';
import { GroupInfo } from '@/types/group';
import { navigateTo } from '@/utils/route';

import './index.less';

interface IProps {
  type: GroupType;
  data: GroupInfo;
  onClick: () => void;
}

const PREFIX = 'group-card';

function GroupCard(props: IProps) {
  const { type, data, onClick } = props;
  const showButton = type === GroupType.All;
  const isFull = (data.groupMemberCount || 0) >= 500;

  const handleClickView = useCallback(() => {
    navigateTo(PageUrl.GroupJob, { groupId: data.blGroupId, title: data.imGroupNick });
  }, [data]);

  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__group-container`}>
        <Image
          mode="aspectFit"
          className={`${PREFIX}__group-avatar`}
          src={data.groupAvatar || require('@/statics/svg/wechat.svg')}
        />
        <div className={classNames(`${PREFIX}__group-info`, { full: !showButton })}>
          <div className={`${PREFIX}__group-title-container`}>
            <div className={`${PREFIX}__group-title`}>{data.imGroupNick}</div>
            {isFull && <div className={`${PREFIX}__group-full-icon`}>已满</div>}
          </div>
          <div className={`${PREFIX}__group-desc`}>
            <div className={`${PREFIX}__group-job-count`}>{`${data.allJobs}条通告`}</div>
            <div className={`${PREFIX}__group-view`} onClick={handleClickView}>
              查看
            </div>
          </div>
        </div>
      </div>
      {showButton && (
        <LoginButton className={`${PREFIX}__group-button`} onClick={onClick}>
          我要进群
        </LoginButton>
      )}
    </div>
  );
}

export default GroupCard;
