import { Button } from '@tarojs/components';
import { NodesRef } from '@tarojs/taro';

import classNames from 'classnames';
import { useCallback, useEffect, useState } from 'react';

import JobList from '@/components/job-list';
import ProductGroupDialog from '@/components/product-dialog/group';
import { APP_TAB_BAR_ID } from '@/constants/app';
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
import { logWithPrefix } from '@/utils/common';

import './index.less';

interface IProps {
  visible: boolean;
}

const PREFIX = 'my-group-job-fragment';
const LIST_CONTAINER_CLASS = 'my-group-job-fragment-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 log = logWithPrefix(PREFIX);

const NoGroupTips = (props: { onClick: () => void; className?: string; height?: number }) => {
  const { className, height, onClick } = props;
  return (
    <div className={classNames(`${PREFIX}__tips-container`, className)} style={height ? { height } : undefined}>
      <div className={`${PREFIX}__tips-content`}>
        <div className={`${PREFIX}__tips-content-bg`} />
        <div className={`${PREFIX}__tips-first-panel`}>
          <div className={`${PREFIX}__tips-title`}>找不到您所在群的通告?</div>
          <div>点击下方添加群，联系客服</div>
        </div>
        <div>
          <div className={`${PREFIX}__tips-title`}>添加群后，您可以</div>
          <div>·在播络小程序即可查看群里去重后的所有通告</div>
          <div>·通过类目、地址等关键信息查找群内通告</div>
        </div>
      </div>
      <Button className={`${PREFIX}__add-group-button`} onClick={onClick}>
        免费添加群
      </Button>
    </div>
  );
};

function MyGroup(props: IProps) {
  const { visible } = props;
  const listHeight = useListHeight(CALC_LIST_PROPS);
  const [isEmpty, setIsEmpty] = useState(false);
  const [dialogVisible, setDialogVisible] = useState(false);
  log('list height', listHeight);

  const handleListEmpty = useCallback(() => {
    setIsEmpty(true);
  }, []);

  const handleAddGroup = useCallback(() => {
    setDialogVisible(true);
    // Taro.eventCenter.trigger(EventName.ADD_GROUP);
  }, []);

  const handleDialogHidden = useCallback(() => {
    setDialogVisible(false);
  }, []);

  useEffect(() => {
    if (visible) {
      setIsEmpty(false);
    }
  }, [visible]);

  const dialog = (
    <ProductGroupDialog
      visible={dialogVisible}
      onClose={handleDialogHidden}
      style={{ position: 'absolute', top: isEmpty ? '30%' : '40%' }}
    />
  );

  if (isEmpty) {
    return (
      <>
        <NoGroupTips className={LIST_CONTAINER_CLASS} height={listHeight} onClick={handleAddGroup} />
        {dialog}
      </>
    );
  }

  return (
    <div className={PREFIX}>
      <JobList visible isOwner className={LIST_CONTAINER_CLASS} listHeight={listHeight} onListEmpty={handleListEmpty} />
      <Button className={`${PREFIX}__float-add-group-button`} onClick={handleAddGroup}>
        添加群
      </Button>
      {dialog}
    </div>
  );
}

export default MyGroup;
