import moment from "moment";
import { Link } from "react-router-dom";
import henceforthApi from "../utils/henceforthApi";
import { ipfsGetFileUrl } from "../utils/henceforthIPFS";
import { Spinner } from "./BootstrapCompo";
import React from "react";
import profile_placeholder from "../assets/images/profile_placeholder.png";
import piano from "../assets/images/piano.jpg";
import verify from "../assets/images/verified.svg";
const CONTENT_TYPE = "AUDIO"
export const ExploreCard = ({
  currentUsd,
  currentUser,
  _id,
  auction_id,
  coin,
  latest_bid,
  created_at,
  category_id,
  created_by,
  current_owner,
  creator_address,
  description,
  end_date,
  file_ext,
  file_url,
  video_url,
  min_bid,
  name,
  owner_address,
  is_sold,
  price,
  order_id,
  product_id,
  royalties,
  sold_to,
  start_date,
  tags,
  type,
  total_comments,
  total_favourites,
  tiktok_count,
  profile_pic,
  file,
  cover_img,
  content_type
}: any) => {
  return (
    <div className="col-lg-4 col-md-6">
      <div className="row">
        <div className="col">
          <div className=" mb-4 product-box">
            <Link to={`/product/${_id}?type=weekly`}>
              <div className="explore-img">
                {/* <img src={`${henceforthApi.API_FILE_ROOT_ORIGINAL}${cover_img} ? ${henceforthApi.API_FILE_ROOT_ORIGINAL}${cover_img} : https://ipfs.infura.io/ipfs/${cover_img}`} /> */}
                {content_type === CONTENT_TYPE ? <img src={`https://ipfs.infura.io/ipfs/${cover_img}`}></img> : <video src={`https://ipfs.infura.io/ipfs/${file}`} autoPlay muted loop></video>}
              </div>
            </Link>
            <div className="card-body product-content">
              <h2 className="fw-bold mt-0 mb-0">{name}</h2>

              <div className="both-added my-2">
                <div className="d-flex align-items-center">
                  <div className="brown-img me-2">
                    {current_owner ? (
                      <img
                        src={
                          current_owner?.profile_pic
                            ? `${henceforthApi.API_FILE_ROOT_MEDIUM}${current_owner?.profile_pic}`
                            : profile_placeholder
                        }
                      />
                    ) : (
                      <img
                        src={
                          created_by?.profile_pic
                            ? `${henceforthApi.API_FILE_ROOT_MEDIUM}${created_by?.profile_pic}`
                            : profile_placeholder
                        }
                      />
                    )}
                  </div>
                  <div className="">
                    <h3 className="fw-bold mb-0">
                      {current_owner ? current_owner?.name : created_by?.name}{" "}

                    </h3>
                    <p className="mb-0 text-gray">
                      @
                      {current_owner
                        ? current_owner?.user_name
                          ? current_owner?.user_name
                          : "Not available"
                        : created_by?.user_name
                          ? created_by?.user_name
                          : "Not available"}
                    </p>
                  </div>
                </div>
                <div className="brown-text text-wrap">
                  <h2>{moment(Number(created_at)).format("MMM DD, YYYY")}</h2>
                  <p>Minted</p>
                </div>

              </div>{current_owner?.tiktok_count && <div className=" d-flex space-between">
                <h3><i className="fas fa-heart"></i> : {total_comments ? total_comments : '0'}</h3>
                <h3 className='mx-3'><i className="fas fa-comment-lines "></i> : {total_favourites ? total_favourites : '0'}</h3>
              </div> ? <div className=" d-flex space-between">
                <h4><i className="fas fa-heart"></i> : {total_comments ? total_comments : '0'}</h4>
                <h4 className='mx-3'><i className="fas fa-comment-lines "></i> : {total_favourites ? total_favourites : '0'}</h4>
              </div> : ""}

              <hr className="my-2 mb-1" />
              <div className="d-flex justify-content-between align-items-center">
                <div className="btn-group">
                  {/* {auction_id == "0x01" ? (
                    <div className="bown-num ">
                      <h4 className="mb-0">{price} Eth</h4>
                      <h5 className="mb-0">
                        ${Number(currentUsd * Number(price)).toFixed(3)} USD
                      </h5>
                    </div>
                  ) : (
                    <div className="bown-num">
                      <h4 className="text-dark mb-0">
                        {latest_bid ? latest_bid.bid_amount : min_bid} BNB
                      </h4>
                      <h5 className="text-dark">
                        $
                        {Number(
                          currentUsd *
                          Number(latest_bid ? latest_bid.bid_amount : min_bid)
                        ).toFixed(3)}{" "}
                        USD
                      </h5>
                    </div>
                  )} */}
                  <div className="bown-num ">
                    <h4 className="mb-0">{price} Eth</h4>
                    <h5 className="mb-0">
                      ${Number(currentUsd * Number(price)).toFixed(3)} USD
                    </h5>
                  </div>
                </div>
                <Link
                  to={`/product/${_id}?type=weekly`}
                  className="btn btn-primary-button"
                >
                  {/* {auction_id == "0x01" ? "Fixed" : "Bid"}{" "} */}
                  Details
                  <i className="fa fa-long-arrow-right ms-1"></i>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export const TopCreateCard = ({
  _id,
  first_name,
  last_name,
  profile_pic,
  total_coins,
  user_name,
}: any) => {
  return (
    <Link to={`/creator/${_id}`}>
      <div className="box-up">
        <div className="boxess">
          <div className="brown-img">
            <img
              src={
                profile_pic
                  ? `${henceforthApi.API_FILE_ROOT_SMALL}${profile_pic}`
                  : profile_placeholder
              }
            />
          </div>
          <div className="both-added">
            <div className="brown-text">
              <h2>
                {first_name ? first_name : user_name}{" "}
                {last_name ? last_name : ""}
              </h2>
              <p>5841.25 BNB</p>
            </div>
            <div className="bown-num">
              <h4>{total_coins}</h4>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};


export const NftStreaming = ({
  _id,
  cover_img,
  artist
}: any) => {
  return (
    <Link to={`/nft-streaming/${_id}`}>

      <div className="col-md-3 ">
        <div className="collection-img position-relative rounded">
          <img src={piano} alt="img-collection" />
          <h3>{artist}</h3>
        </div>
      </div>
    </Link>
  );
};

export const Activity = ({
  res,
  _id,
  profile_pic,
  nft_id,
  user_name,
  image,
  name,
  other_user_id,
  type

}: any) => {
  return (

    <div className="card mb-3" >
      <div className="row">
        <div className="col">
          <img
            src={
              nft_id?.file_url
                ? `${nft_id.file_url}`
                : profile_placeholder
            }
            className="me-2 imageSize-activity"
            alt=""
          />
        </div>
        <div className="col">
          <div className="card-body">
            <h3 className="card-title mb-1 text-theme fs-14" > {nft_id ? nft_id.name : `Not Available`}</h3>

            <h3 className="card-text fw-bold mt-0 mb-0">{type && type ? type : "type not available"}</h3>
            <p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>


  );
};

export const CollectionCard = ({
  res,
  _id,
  profile_pic,
  nft_id,
  user_name,
  image,
  name,
  other_user_id,
  type,
  img_url

}: any) => {
  return (



    <div className="col-md-3 ">
      <div className="collection-img position-relative rounded">
        <img src={img_url && img_url ? ` ${henceforthApi.API_FILE_ROOT_MEDIUM}${img_url}` : piano} alt="img-collection" />
        <h3>{name}</h3>
      </div>
    </div>


  );
};
export const MarketDetailsPlayer = ({
  file_ext,
  media_url,
  video_url,
  setImageUrl,
}: any) => {
  if (String(file_ext).includes("video")) {
    return (
      <video controls autoPlay muted loop>
        {" "}
        <source src={`${video_url}`}></source>
      </video>
    );
  } else if (media_url) {
    return (
      <div data-bs-toggle="modal" data-bs-target="#openPhotosModal">
        {" "}
        <img
          src={media_url}
          alt={media_url}
          onClick={() => setImageUrl(media_url)}
        />
      </div>
    );
  } else return <Spinner />;
};
export const NftPlayer = ({ selectedFile, setSelectedFile, loading }: any) => {
  return (
    <div className="upload-times">
      {String(selectedFile.type).includes("image") ? (
        <img src={URL.createObjectURL(selectedFile)} />
      ) : (
        <video controls autoPlay muted loop>
          {" "}
          <source src={URL.createObjectURL(selectedFile)}></source>
        </video>
      )}
      <i
        className="fa fa-times"
        onClick={() => (!loading ? setSelectedFile(null) : alert("Not allow"))}
      ></i>
    </div>
  );
};
export const CreatorListLayout = ({
  _id,
  profile_pic,
  first_name,
  last_name,
  user_name,
}: any) => {
  return (
    <div className="week">
      <Link to={`/creator/${_id}`}>
        <div className="week-img">
          <img
            src={
              profile_pic
                ? `${henceforthApi.API_FILE_ROOT_MEDIUM}${profile_pic}`
                : profile_placeholder
            }
          />
        </div>
        <div className="week-text d-flex">
          <img src={verify} />
          <div className="img-text">
            <h3 title={`${first_name} ${last_name}`}>
              {first_name} {last_name}
            </h3>
            <p title={user_name}>@{user_name}</p>
          </div>
        </div>
      </Link>
    </div>
  );
};
export const BidsPlacedBy = ({
  _id,
  bid_amount,
  created_at,
  bid_placed_by,
}: any) => {
  return (
    <>
      <div className="boxess mt-3">
        <div className="brown-img">
          <img
            src={
              bid_placed_by?.profile_pic
                ? `${henceforthApi.API_FILE_ROOT_MEDIUM}${bid_placed_by?.profile_pic}`
                : profile_placeholder
            }
          />
        </div>
        <div className="both-added align-items-center">
          <div className="brown-text">
            <h2>
              {" "}
              <Link
                to={`/${bid_placed_by.account_type == "USER" ? "user" : "creator"
                  }/${bid_placed_by._id}`}
              >
                <span>@{bid_placed_by.user_name}</span>
              </Link>
            </h2>
            <p>
              {moment(Number(created_at)).format("MMM DD, YYYY")} at{" "}
              {moment(Number(created_at)).format("hh:mm:a")}
            </p>
          </div>
          <div className="brown-text">
            <div className="bown-num">
              <h4>
                <strong>{bid_amount} BNB</strong>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};





export const ManageStream = ({
  res,
  cover_img,

  _id,
  profile_pic,
  nft_id,
  user_name,
  image,
  name,
  other_user_id,
  type

}: any) => {
  // {console.log(res?.cover_img)}
  return (
    <>
      <td>
        1
      </td>
      <td>
        <div className="text-nowrap">
          <img
            src={
              res?.cover_img
                ? `${henceforthApi.API_FILE_ROOT_SMALL}${res?.cover_img}`
                : profile_placeholder
            }
            className="me-2 imageSize"
            alt=""
          />
          {res?.nft_id?.name ? `${res?.nft_id?.name} ` : `Not Available`}
        </div>
      </td>
      <td><div className="text-nowrap">
        <img
          src={
            res?.nft_id?.created_by?.profile_pic
              ? `${henceforthApi.API_FILE_ROOT_SMALL}${res?.nft_id?.created_by?.profile_pic}`
              : profile_placeholder
          }
          className="me-2 imageSize"
          alt=""
        />
        {res?.nft_id?.created_by?.name ? `${res?.nft_id?.created_by?.name} ` : `Not Available`}
      </div></td>
      <td>
        <div className="text-nowrap">
          <img
            src={
              res?.profile_pic
                ? `${henceforthApi.API_FILE_ROOT_SMALL}${res?.profile_pic}`
                : profile_placeholder
            }
            className="me-2 imageSize"
            alt=""
          />
          {res?.artist ? `${res?.artist} ` : `Not Available`}
        </div>
      </td>
      <td>
        {res?.producer ? `${res?.producer} ` : `Not Available`}
      </td>
      <td>
        <div className="d-flex">
          <Link
            to={`/manage-streamingDetails/${res?._id}`}
            className="btn btn-xs btn-white me-2"
          >
            <i className="fas fa-eye me-1"></i>
            View
          </Link>
          <Link
            to={`/manage-streamingDetails/${res?._id}`}
            className="btn btn-xs btn-white me-2"
          >
            <i className="fas fa-edit me-1"></i>
            Edit
          </Link>
        </div>
      </td>
    </>


  );
};