import locales from '~/locales/fragments/contentLink';
import InputLabel from '~/src/components/InputLabel';
import TextInput from '~/src/components/TextInput';
import { useI18nStatic } from '~/src/lib/i18n';
import { isUrl, prependProtocol } from '~/src/lib/utils/url';

export const DestinationInput = ({
  initialValue,
  isDisabled = false,
}: {
  initialValue?: string;
  isDisabled?: boolean;
}) => {
  const { t } = useI18nStatic<'contentLink'>(locales);

  return (
    <InputLabel
      value={t('destinationInput.label')}
      description={t('destinationInput.description')}
    >
      <TextInput
        testId="destinationUrlInput"
        name="destinationUrl"
        autoFocus
        required
        width="100%"
        height="5rem"
        maxLength={2000}
        defaultValue={initialValue}
        isDisabled={isDisabled}
        placeholder={t('destinationInput.placeholder')}
        onChange={({ value, setValue }) => {
          setValue(prependProtocol(value));
        }}
        toValidationMessage={({ value }) => {
          if (isUrl(value)) return;
          return t('destinationInput.invalidUrl');
        }}
      />
    </InputLabel>
  );
};