import React from "react";
import { KeyboardTypeOptions, Platform } from "react-native";

import { Input } from "../Input";
import { VideoEmbed } from "../VideoEmbed";
import { View } from "../View";

type Props = {
  onChange?: (value: string) => void;
  value?: string;
  keyboardType?: KeyboardTypeOptions;
  aspectRatio?: number;
};

const EmbedInput = ({
  onChange,
  value,
  keyboardType = Platform.OS === "ios" ? "url" : "default",
  aspectRatio = 16 / 9,
}: Props) => {
  return (
    <View>
      {!!value && <VideoEmbed aspectRatio={aspectRatio} src={value} />}
      <Input onChange={onChange} value={value} keyboardType={keyboardType} />
    </View>
  );
};

export default EmbedInput;