import { Button, ColumnLayout, Input, InputProps, SpaceBetween, TokenGroup, TokenGroupProps } from "@cloudscape-design/components";
import CInput from "react-hook-form-cloudscape/components/input";

export type InputTokenGroupProps = { 
  type?: InputProps.Type; 
  control: any;
  name: string;
  tokenGroupProps: TokenGroupProps,
  onAdd: () => void,
  onDismiss: (i: number) => void,
};

export const InputTokenGroup = (props: InputTokenGroupProps) => {
  return (
    <SpaceBetween size="xs">
      <ColumnLayout columns={2}>
        <CInput
          type={props.type}
          name={props.name}
          rules={{
            minLength: 1
          }}
          control={props.control}
        />
        <Button onClick={() => props.onAdd()}>Add</Button>
      </ColumnLayout>
      <TokenGroup 
        onDismiss={(e) => props.onDismiss(e.detail.itemIndex)}
        {...props.tokenGroupProps} 
      />
    </SpaceBetween>
  );
};