/*
 * @Author: Nian Yi
 * @Date: 2022-04-11 14:27:52
 * @LastEditTime: 2022-04-11 14:37:44
 * @LastEditors: Nian Yi
 * @Description:
 * @FilePath: /easyvadmin/src/scripts/components/EasyvNodeCard/Group.tsx
 * 奥利给
 */
import React, { useMemo } from 'react';
import styles from './index.less';
import { ApplicationLightColored } from '@easyv/react-icons';
import { transferColorToRgba } from 'utils/nodes';
import { Handle, Position } from '@easyv/react-flow-renderer';

function Group(props) {
  const { width, name, height, color, id }: { id: string; color: string; width: number; height: number; name: string } = props.data;
  const { group_style, header_style } = useMemo(() => {
    const group_style = {
        width,
        height
      },
      header_style = {};
    const groupColor = transferColorToRgba(color, 0.04);
    if (groupColor) {
      group_style['background'] = groupColor;
    }
    const headerColor = transferColorToRgba(color, 0.12);
    if (headerColor) {
      header_style['background'] = headerColor;
    }
    return {
      group_style,
      header_style
    };
  }, [width, height, color]);

  return (
    <div className={styles.group} style={group_style}>
      <div className={styles.groupHeader} style={header_style}>
        <span className={styles.groupIcon}>
          <Handle id={id} position={Position.Left} type={'target'}></Handle>
          <ApplicationLightColored />
        </span>
        <span className={styles.groupState}>{name}</span>
      </div>
    </div>
  );
}

export default Group;
