import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faXmark } from '@fortawesome/free-solid-svg-icons'
import { css } from '@emotion/css'
import contactImg from '../../static/images/contact.png'
import facebookImg from '../../static/images/facebook.png'
import lineImg from '../../static/images/line.png'
import mobileImg from '../../static/images/call.png'
import { styled } from 'twin.macro'

const OrderButton = (props) => {
  const { data = {} } = props

  const [isShowContact, setIsShowContact] = useState(false)

  if (!data) {
    return null
  }

  const {
    orderButtonStatus = '',
    action = '',
    text = 'สั่งซื้อสินค้า',
    backgroundColor = '#26D496',
    fontColor = '#FFFFFF',
    contactButtonStatus = '',
    messager = '',
    line = '',
    mobile = '',
  } = data

  const StyleButtonContact = styled.button(({ backgroundColor, opacity }) => [
    `
  background: ${backgroundColor};
        width: 70px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        opacity: ${opacity};
        border: none;
        height: 44px;
        font-size: 18px;
        text-align: center;
        &:hover {
          cursor: pointer;
        }
  `,
  ])

  const listContact = [
    {
      image: facebookImg,
      link: messager,
    },
    { image: lineImg, link: line },
    {
      image: mobileImg,
      link: mobile,
    },
  ]

  return (
    <div
      className={`${css`
        width: 100%;
        bottom: 0;
        position: sticky;
        z-index: 999;
        background-color: #ffffff;
        padding: 15px 0px;
        display: flex;
      `}`}
    >
      {/* ========= contact popup ========= */}
      {isShowContact == true ? (
        <div
          className={`${css`
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            position: absolute;
            right: 0px;
            bottom: 50px;
            animation: fadeIn 1s;
            margin-bottom: 15px;

            @keyframes fadeIn {
              from {
                opacity: 0;
              }
              to {
                opacity: 1;
              }
            }
          `}`}
        >
          {listContact.map((item, index) => (
            <div
              className={`${css`
                width: 60px;
                height: 60px;
                border-radius: 24px;
                background: #f1f5f9;
                box-shadow: 4px 4px 10px rgba(41, 45, 47, 0.1), -4px 4px 10px rgba(255, 255, 255, 0.6);
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 10px;
                &:hover {
                  cursor: pointer;
                }
              `}`}
              key={index}
              onClick={() => console.log(`linked`)}
            >
              <img
                src={item.image}
                alt={'contact'}
                className={`${css`
                  width: 43px;
                  height: 43px;
                `}`}
              />
            </div>
          ))}
        </div>
      ) : null}

      {/* ========= button ========= */}
      <div
        className={`${css`
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        `}`}
      >
        {!orderButtonStatus || orderButtonStatus == 'hide' ? null : (
          <button
            className={`${css`
              background: ${backgroundColor};
              color: ${fontColor};
              width: 100%;
              margin-right: 10px;
              border-radius: 10px;
              border: none;
              height: 44px;
              font-size: 18px;
              text-align: center;
              &:hover {
                cursor: pointer;
              }
            `}`}
            onClick={() => console.log('== clicked ==')}
          >
            {text}
          </button>
        )}

        {/* ========= button contact ========= */}
        {!contactButtonStatus || contactButtonStatus == 'hide' ? null : isShowContact == true ? (
          <StyleButtonContact backgroundColor={backgroundColor} opacity={1} onClick={() => setIsShowContact(false)}>
            <FontAwesomeIcon
              icon={faXmark}
              className={`${css`
                font-size: 24px;
                color: white;
              `}`}
            />
          </StyleButtonContact>
        ) : (
          <StyleButtonContact opacity={0.8} onClick={() => setIsShowContact(true)} backgroundColor={backgroundColor}>
            <img
              src={contactImg}
              className={`${css`
                width: 30px;
                height: 30px;
              `}`}
            />
          </StyleButtonContact>
        )}
      </div>
    </div>
  )
}

OrderButton.propTypes = {
  data: PropTypes.shape({
    orderButtonStatus: PropTypes.string,
    action: PropTypes.any,
    text: PropTypes.string,
    backgroundColor: PropTypes.string,
    fontColor: PropTypes.string,
    contactButtonStatus: PropTypes.string,
    messager: PropTypes.string,
    line: PropTypes.string,
    mobile: PropTypes.string,
  }),
}

OrderButton.defaultProps = {
  data: {
    orderButtonStatus: '',
    action: '',
    text: 'สั่งซื้อสินค้า',
    backgroundColor: '#26D496',
    fontColor: '#FFFFFF',
    contactButtonStatus: '',
    messager: '',
    line: '',
    mobile: '',
  },
}

export default OrderButton
