import React from 'react';
import back from '../assets/back.svg';

import {
    Wrapper,
    Key,
    KeyRow,
    BackspaceBtn,
} from './keyboard.style';

const rows = [
    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
    ['z', 'x', 'c', 'v', 'b', 'n', 'm', <BackspaceBtn src={back} />]
]

export const Keyboard = ({ onChange }) => {
    const handleClick = (key) => () => {
        if (typeof key === 'string') {
            onChange(v => v + key.toUpperCase());
        } else {
            onChange(v => v.split('').slice(0, -1).join(''))
        }
    } 
    return (
        <Wrapper>
            {rows.map((row, index) => (
                <KeyRow key={index}>
                    {row.map(key => (
                        <Key key={key} onClick={handleClick(key)}>{key}</Key>
                    ))}
                </KeyRow>
            ))}
        </Wrapper>
    )
}