/**
 * This program has been developed by students from the bachelor Computer Science at
 * Utrecht University within the Software Project course.
 * © Copyright Utrecht University (Department of Information and Computing Sciences)
 */

/* istanbul ignore file */
/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
 * We do not test components/renderfunctions/styling files.
 * See testing plan for more details.*/

import { FormBody, FormDiv, FormCard, FormHBar } from '@graphpolaris/shared/lib/components/forms';
import { SchemaReactflowRelation } from '@graphpolaris/shared/lib/schema/model';
import React from 'react';
import { NodeProps } from 'reactflow';

export type SchemaRelationshipPopupProps = {
  data: SchemaReactflowRelation;
  onClose: () => void;
};

/**
 * NodeQualityEntityPopupNode is the node that represents the popup that shows the node quality for an entity
 * @param data Input data of type NodeQualityDataForEntities, which is for the popup.
 */
export const SchemaRelationshipPopup = (props: SchemaRelationshipPopupProps) => {
  return (
    <div className="card card-bordered rounded-none text-[0.9rem] min-w-[10rem]">
      <div className="card-body p-0">
        <span className="px-2.5 pt-2">
          <span>Relationships</span>
          <span className="float-right">TBD</span>
        </span>
        <div className="h-[1px] w-full bg-offwhite-300"></div>
        <div className="px-2.5 text-[0.8rem]">
          <p>
            Null Values: <span className="float-right">TBD</span>
          </p>
          <p>
            Not connected: <span className="float-right">TBD</span>
          </p>
        </div>
        <div className="h-[1px] w-full bg-offwhite-300"></div>
        {/* <span>Attributes:</span>
        <div className="text-xs">
          {data.attributes.map((attribute) => {
            return (
              <div className="flex flex-row" key={attribute.name}>
                <span>{attribute.name}</span>
              </div>
            );
          })}
        </div> */}
        <button
          className="btn btn-outline btn-primary border-0 btn-sm p-0 m-0 text-[0.8rem] mb-2 mx-2.5 min-h-0 h-5"
          onClick={() => props.onClose()}
        >
          Close
        </button>
      </div>
    </div>
  );
};