import React from 'react'
import toast from 'toasted-notes'
import 'toasted-notes/src/styles.css'
import Styled from 'rsg-components/Styled'

const styles = ({ mq }) => ({
  palette: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    [mq.small]: {
      isolate: false,
      display: 'block'
    }
  },
  title: {
    textAlign: 'left',
    [mq.small]: {
      isolate: false,
      textAlign: 'center'
    }
  }
})

function Palette({ colors, classes }) {
  const paletteStyles = color => ({
    backgroundColor: color.hex,
    color: color.textColor || '#222',
    textAlign: 'center'
  })
  const buttonStyles = color => ({
    backgroundColor: color.hex,
    color: color.textColor || '#222',
    border: 0,
    padding: '20px',
    outline: 'none'
  })
  const copyText = event => {
    const { textContent } = event.target
    navigator.clipboard.writeText(textContent).then(() => {
      toast.notify(`Copied ${textContent.replace(/\./, '')}`, {
        position: 'bottom-right',
      })
    })
  }
  return (
    <div style={{
      margin: '10px 0 40px',
      border: 'solid thin rgba(0,0,0,.08)',
      borderRadius: '4px',
      overflow: 'hidden'
    }}>
      {colors.map(color => (
        <div key={color.hex} style={paletteStyles(color)} className={classes.palette}>
          <div style={buttonStyles(color)} className={classes.title}>
            <h4 style={{ fontWeight: 'bold' }}>{color.title}</h4>
            <p style={{ fontSize: '1rem', minHeight: '1.5rem' }}>{color.usage}</p>
          </div>
          <button onClick={copyText} style={buttonStyles(color)} title="Copy value">{color.variable}</button>
          <button onClick={copyText} style={buttonStyles(color)} title="Copy value">{color.hex}</button>
        </div>
      ))
      }
    </div >
  )
}

export default Styled(styles)(Palette)