import React, { useState } from 'react';
import classNames from 'classnames/bind';
import styles from './Share.scss';
import { ReactComponent as IconShare } from '@assets/img/svg/ico_share.svg';
import Layer from './Layer';

const cx = classNames.bind(styles);

interface IOwnProps { };

const Share: React.FC<IOwnProps> = ({ }) => {
  const [showLayer, setShowLayer] = useState<boolean>(false);
  const handleClick = () => {
    navigator.clipboard.writeText(window.location.href).then(() => {
      alert('복사되었습니다.');
    });
    setShowLayer(false);
  };

  return (
    <div className={cx('share')}>
      <button type="button" onClick={() => setShowLayer(!showLayer)}>
        <IconShare />
        <span className={cx('blind')}>공유하기</span>
      </button>
      {showLayer && (
        <div className={cx('layer_wrap')}>
          <Layer title='페이지 공유하기' buttonText='복사하기' onClickButton={handleClick} alignCenter={false}>
            <div className={cx('url')}>{decodeURI(window.location.href)}</div>
          </Layer>
        </div>
      )}
    </div>
  );
};

export default Share;
