import { Box, Center, Input as ChakInput, Text } from '@chakra-ui/react';
import React, { useState } from 'react';

const UrlInput = ({ value, onEnter }) => {
  const [error, setError] = useState(null);
  const urlRegex = /([\w+]+\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#\.]?[\w-]+)*\/?/gm;

  return (
    <Box key={value}>
      <ChakInput
        variant="outline"
        placeholder="https://someurl.png"
        bg="white"
        _dark={{ bg: 'gray.600' }}
        defaultValue={value}
        _focus={{ borderColor: 'primary', boxShadow: '0 0 0 1px #d7819b' }}
        onKeyDown={(e) => {
          if (e.key !== 'Enter') return;
          const url = e.target.value;
          if (!urlRegex.test(url)) {
            setError('Invalid URL');
            return;
          }
          setError(null);
          onEnter(url);
        }}
      />
      {error && (
        <Center>
          <Text mt="2" fontSize="sm" color="red.600" fontWeight="600">
            {error}
          </Text>
        </Center>
      )}
    </Box>
  );
};

export default UrlInput;