import { FC } from "react";
import {
  HorizontalPlaceholderWrapper,
  PlaceholderWrapper,
  VerticalPlaceholderWrapper,
} from "../../FormListItem/FormListItem.styles";

interface IPlaceholder {
  handleDragOver: (e: any, id: string, list: string, groupID?: number) => void;
  listName: string;
  id: string;
  isActive: boolean;
  groupID?: number;
}
interface IPlaceholderExtend extends IPlaceholder {
  mode: string;
}
export const PlaceholderHorizontal: FC<IPlaceholder> = ({
  handleDragOver,
  listName,
  id,
  isActive,
}) => {
  return (
    <HorizontalPlaceholderWrapper>
      <PlaceholderWorksArea
        handleDragOver={handleDragOver}
        listName={listName}
        id={id}
        isActive={isActive}
        mode="horizontal"
      />
    </HorizontalPlaceholderWrapper>
  );
};
export const PlaceholderVertical: FC<IPlaceholder> = ({
  handleDragOver,
  listName,
  id,
  isActive,
  groupID,
}) => {
  return (
    <VerticalPlaceholderWrapper>
      <PlaceholderWorksArea
        handleDragOver={handleDragOver}
        listName={listName}
        id={id}
        isActive={isActive}
        mode="vertical"
        groupID={groupID}
      />
    </VerticalPlaceholderWrapper>
  );
};

export const PlaceholderWorksArea: FC<IPlaceholderExtend> = ({
  handleDragOver,
  listName,
  id,
  isActive,
  mode,
  groupID,
}) => {
  return (
    <PlaceholderWrapper
      onDragOver={(e) => handleDragOver(e, id, listName, groupID as number)}
      isActive={isActive}
      mode={mode}
    >
      <div></div>
    </PlaceholderWrapper>
  );
};