import { Handle, Position } from 'reactflow';
import { Card, Skeleton, Text } from '@mantine/core';
import Link from 'next/link';
import classes from './Node.module.css';
import { NodeIcon } from '@/src/components/Node/NodeIcon';

export function NodeStep({ data, id }: any) {
  return (
    <div>
      {String(id).includes('loader') ? (
        <Card
          padding="sm"
          style={{ width: '130px', backgroundColor: 'rgb(24 24 24 / 66%)' }}
          shadow="sm"
        >
          <div
            style={{
              display: 'flex',
              width: '100%',
              justifyContent: 'flex-start',
              alignItems: 'center',
            }}
          >
            <div className={classes.icon} style={{ top: 0 }}>
              <Skeleton height={25} width={25} />
            </div>

            <div>
              <Skeleton height={25} width={75} />
            </div>
          </div>
        </Card>
      ) : (
        <Link
          href={`/workflow/${data.workflow.workflowId}/steps/${data.stepId}`}
          style={{ color: 'inherit', textDecoration: 'none' }}
        >
          <Card
            padding="sm"
            style={{ width: '130px', backgroundColor: 'rgb(24 24 24 / 66%)' }}
            shadow="sm"
          >
            <div
              style={{
                display: 'flex',
                width: '100%',
                justifyContent: 'flex-start',
                alignItems: 'center',
              }}
            >
              <div className={classes.icon}>
                <NodeIcon channel={data.type} />
              </div>

              <Text size="8px">
                <b>{data.stepId}</b>
              </Text>
            </div>
          </Card>
        </Link>
      )}

      <Handle
        type="target"
        position={Position.Top}
        style={{
          width: 1,
          height: 1,
          border: 'none',
          background: '#383838',
          minWidth: 4,
          minHeight: 4,
        }}
      />
      <Handle
        type="source"
        position={Position.Bottom}
        style={{
          width: 1,
          height: 1,
          border: 'none',
          background: '#383838',
          minWidth: 4,
          minHeight: 4,
        }}
      />
    </div>
  );
}
