const ResponsiveCardImg = styled(Card.Img)`
    // For screens wider than 768px
    @media(min-width: 768px) {
        // Your responsive styles here.
    }

    // For screens smaller than 768px
    @media(max-width: 768px) {
        // Your responsive styles here.
    }
`

export default function App() {
    return (
        <MainContainer>
            <Container>
                <Card text='white' bg='dark' style={styles.mainCard}>
                <ResponsiveCardImg
                    style={styles.cardImage}
                    onClick={handleClick}
                    src={apeImage}
                    alt='Degenerate Ape Academy'
                />
                <Card.Body>
                    <Card.Title className='text-center' as='h2'>
                    {apeId}
                    </Card.Title>
                </Card.Body>
                </Card>
            </Container>
        </MainContainer>
    );
}

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

// Get the text that the user has selected
const getSelectedText = () => window.getSelection().toString();
getSelectedText();

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

const longestPalindrome = (s) => {
    if(s.length === 1) return s
    
    const odd = longestOddPalindrome(s)
    const even = longestEvenPalindrome(s)
    
    
    if(odd.length >= even.length) return odd
    if(even.length > odd.length) return even
};

const longestOddPalindrome = (s) => {    
    let longest = 0
    let longestSubStr = ""
    
    for(let i = 1; i < s.length; i++) {
        
        let currentLongest = 1
        let currentLongestSubStr = ""
        let left = i - 1
        let right = i + 1
        
        while(left >= 0 && right < s.length) {
            const leftLetter = s[left]
            const rightLetter = s[right]

            left--
            right++

            if(leftLetter === rightLetter) {
                currentLongest += 2
                currentLongestSubStr = s.slice(left+1, right)
            } else break
        }
        
                        
        if(currentLongest > longest) {
            if(currentLongestSubStr) longestSubStr = currentLongestSubStr 
            else longestSubStr = s[i]
            longest = currentLongest
        }
    }
    
    return longestSubStr
}

const longestEvenPalindrome = (s) => {    
    let longest = 0
    let longestSubStr = ""
    
    for(let i = 0; i < s.length - 1; i++) {
        if(s[i] !== s[i+1]) continue;
        
        let currentLongest = 2
        let currentLongestSubStr = ""
        let left = i - 1
        let right = i + 2
        
        while(left >= 0 && right < s.length) {
            const leftLetter = s[left]
            const rightLetter = s[right]

            left--
            right++
            
            if(leftLetter === rightLetter) {
                currentLongest += 2
                currentLongestSubStr = s.slice(left+1, right)
            } else break
        }
                
                
        if(currentLongest > longest) {
            if(currentLongestSubStr) longestSubStr = currentLongestSubStr
            else longestSubStr = s[i] + s[i+1]
    
            longest = currentLongest
        }
    }
    
    return longestSubStr
}
console.log(longestPalindrome("babad"))

function copyString(text){
	async function navigatorClipboardCopy(text){
			if(document.location.protocol != "https:"){
					return false;
			}
			return new Promise((resolve, reject)=>{
					navigator.clipboard.writeText(text).then(()=>{resolve(true);}, ()=>{resolve(false);});
			});
	}
	function domCopy(text){
			if(!(document.execCommand)){
					console.warn("They finally deprecated document.execCommand!");
			}

			const input = document.createElement('textarea');
			input.value = text;
			document.body.appendChild(input);
			input.select();
			const success = document.execCommand('copy');
			document.body.removeChild(input);

			return success;
	}
	function promptCopy(){
			prompt("Copy failed. Might have ... somewhere. Check console.", text);
			console.log(text);
	}
	function done(){
			alert("Copied to clipboard");
	}
	navigatorClipboardCopy(text).catch(()=>{return false;}).then((success)=>{
			if(success){
					done();
			}else{
					if(domCopy(text)){
							done();
					}else{
							promptCopy();
					}
			}
	});
}