import { Image } from '@tarojs/components';
import { NodesRef, useShareAppMessage } from '@tarojs/taro';

import { List } from '@taroify/core';
import { useCallback } from 'react';

import HomePage from '@/components/home-page';
import LoginButton from '@/components/login-button';
import { APP_TAB_BAR_ID } from '@/constants/app';
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
import { openCustomerServiceChat } from '@/utils/common';
import { getCommonShareMessage } from '@/utils/share';

import './index.less';

interface GroupItem {
  title: string;
  serviceUrl: string;
}

const PREFIX = 'group-v2-page';
const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
const CALC_LIST_PROPS: IUseListHeightProps = {
  selectors: [`.${LIST_CONTAINER_CLASS}`, `#${APP_TAB_BAR_ID}`],
  calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
    const [rect, diffRect] = rects;
    return diffRect.top - rect.top;
  },
};
const GROUPS: GroupItem[] = [
  { title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
  { title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
  { title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
  { title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
  { title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
  { title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
  { title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
  { title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
  { title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
  { title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
  { title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
  { title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
  { title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
  { title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
  { title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
  { title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
  { title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
  { title: '【苏州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
  { title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
  { title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
  { title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
  { title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
  { title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
  { title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
];

export default function GroupV2() {
  const listHeight = useListHeight(CALC_LIST_PROPS);

  const handleClick = useCallback((group: GroupItem) => openCustomerServiceChat(group.serviceUrl), []);

  useShareAppMessage(() => getCommonShareMessage());

  return (
    <HomePage>
      <div className={PREFIX}>
        <div className={`${PREFIX}__header`}>
          <div className={`${PREFIX}__header__left-line`} />
          <div className={`${PREFIX}__header__title`}>进本地通告群，高薪通告早知道</div>
          <div className={`${PREFIX}__header__right-line`} />
        </div>
        <div className={LIST_CONTAINER_CLASS}>
          <List style={{ height: `${listHeight}px` }} disabled fixedHeight>
            {GROUPS.map(group => (
              <div className={`${PREFIX}__group-card`} key={group.serviceUrl}>
                <Image
                  mode="aspectFit"
                  className={`${PREFIX}__group-card__avatar`}
                  src="https://neighbourhood.cn/addGroup.jpg"
                />
                <div className={`${PREFIX}__group-card__title`}>{group.title}</div>
                <LoginButton className={`${PREFIX}__group-card__button`} onClick={() => handleClick(group)}>
                  我要进群
                </LoginButton>
              </div>
            ))}
            <div className={`${PREFIX}__bottom-padding`} />
          </List>
        </div>
      </div>
    </HomePage>
  );
}