import React, {
  ReactElement
} from 'react'
import styled from 'styled-components'

/* import {
  MediaQuery
} from '../../common/helpers/MediaQuery' */
import {
  CustomComponent
} from "../../core"
import {
  DefaultInterface
} from "./../../common/helpers/Theme"

import {
  Image
} from '../../core/Image'
import {
  Link
} from '../../core/Link'
import {
  List
} from '../../core/List'
import {
  ListItem
} from '../../core/ListItem'

interface SocialBarInterface extends DefaultInterface {
  data: SocialBarLinkInterface[]
}

interface SocialBarLinkInterface {
  url: string
  name: string
  title: string
  icon?: string
}

function SocialBarListMap(item: SocialBarLinkInterface, i: number) {
  const {
    url,
    title,
    icon
  } = item

  const key = `socialbar-${i}-${(new Date()).getTime()}`

  return (
    <ListItem key={key}>
      { icon ? <Link href={url} target={"_blank"} title={title}>
        <Image src={icon} width={30} />
      </Link> : '' }
    </ListItem>
  )
}

const SocialBarBase: React.FunctionComponent<SocialBarInterface> = (props): ReactElement => {
  const {
    children,
    data
  } = props

  const newProps = Object.assign({}, {...props})

  delete newProps.children
  delete newProps.data

  return <List {...newProps}>
    { !children && data.length && data.map(SocialBarListMap) }

    { !!children && children }
  </List>
}

const Component: React.FunctionComponent<SocialBarInterface> = styled(SocialBarBase)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  list-style: inside none;
  margin: 0px;
  padding: 0px;
  flex-wrap: wrap;

  > li {
    flex: 1;
    height: auto;
    min-height: 30px;
    max-height: 100%;
    line-height: 30px;
    min-width: 30px;
    max-width: 30px;
    width: auto;
    text-align: center;
    border-radius: 5px;
    margin-right: 5px;

    &:last-child {
      margin-right: 0px;
    }

    > a {
      flex: 1;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
`

export const SocialBar: React.FunctionComponent<SocialBarInterface> = (mainNavProps): ReactElement => <CustomComponent {...mainNavProps} callback={(props: SocialBarInterface) => <Component {...props} />} />