import {memo, useCallback,useState} from 'react';

import {styled} from "styled-components";
import {Handle, Position, useConnection} from "@xyflow/react";

export const MetricNode = memo(({ data }) => {
  const connection = useConnection();
  const isConnecting = !!connection.startHandle;
  const [check,setCheck] = useState(false);
  const onCardClick = useCallback(() => {
    setCheck(pre=>!pre)
  },[check])
  return (
    <Container onClick={onCardClick} check={check} style={{width:data.width}}>
      {!isConnecting && (
        <Handle
          className="metricHandle"
          position={Position.Right}
          type="source"
        />
      )}
      <Handle
        className="metricHandle"
        position={Position.Left}
        type="target"
        isConnectableStart={false}
      />
      <strong>{data.label}</strong>
    </Container>
  );
});

const Container = styled.div`
  width: 150px;
  height: 50px;
  border-radius:6px;
  justify-content: center;
  display: flex;
  align-items: center;
  color: ${p => p.check?"white":p.theme.colorText};
  background: ${p => p.check?p.theme.colorPrimary:p.theme.colorPrimaryBg};
`