import CustomModal from '@/components/CustomModal';
import { CopyIcon } from '@/public/Icon';
import { useState } from 'react';
import toast from 'react-hot-toast';
import Avatar from '../Avatar';
import styles from './index.module.scss';

interface ShareModalProps {
  show: boolean;
  handleClose: () => void;
}

const ShareModal = ({ show, handleClose }: ShareModalProps) => {
  const [copied, setCopied] = useState(false);

  const handleCopyClick = () => {
    const textToCopy = 'https://abced123/';
    navigator.clipboard
      .writeText(textToCopy)
      .then(() => {
        setCopied(true);

        toast.success('Link copied to clipboard');

        setTimeout(() => {
          setCopied(false);
          handleClose();
        }, 2000);
      })
      .catch(() => {
        console.error('Failed to copy the text');
      });
  };

  return (
    <CustomModal isCloseBtn show={show} handleClose={handleClose}>
      <div className="px-4 py-4">
        <h4 className="modal-title position-relative text-center">Share</h4>

        <div className="d-flex justify-content-center align-items-center gap-3">
          <Avatar
            src="/images/icons/facebook-share.png"
            alt="Facebook Share"
            size="80px"
            boxShadow="8px 8px 16px 0px rgba(133, 133, 133, 0.08) inset"
            bgColor="drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.08))"
            imageMaxWidth="80%"
            imageWidth="unset"
            imageHeight="auto"
          />
          <Avatar
            src="/images/icons/gmail-share.png"
            alt="Gmail Share"
            size="80px"
            boxShadow="8px 8px 16px 0px rgba(133, 133, 133, 0.08) inset"
            bgColor="drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.08))"
            imageMaxWidth="80%"
            imageWidth="unset"
            imageHeight="auto"
          />
          <Avatar
            src="/images/icons/whatsapp-share.png"
            alt="Whatsapp Share"
            size="80px"
            boxShadow="8px 8px 16px 0px rgba(133, 133, 133, 0.08) inset"
            bgColor="drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.08))"
            imageMaxWidth="80%"
            imageWidth="unset"
            imageHeight="auto"
          />
        </div>

        <h5 className="text-center mt-3 fs-11">Copy Link</h5>

        <div
          className={`${styles.copyLink} px-3 d-flex justify-content-between align-items-center`}
        >
          <p className="mb-0">https://abced123/</p>
          <div className="cursor-pointer" onClick={handleCopyClick}>
            <CopyIcon />
          </div>
        </div>
      </div>
    </CustomModal>
  );
};

export default ShareModal;