import * as React from 'react';
import styled from 'styled-components';

import {
  rem
} from '../../style/function.style';
import { PostDetail } from '../type';

const Container = styled.div`
  width: 100%;
  white-space: nowrap;
  color: #CCCCCC;
  .nw-dark-mode &{
    color: #666;
  }
`;

const LikeSvg = styled.svg`
  display: inline-block;
  vertical-align: middle;
`;

const LikeIcon = () => {
  return (
    <LikeSvg
      width={rem(32)}
      height={rem(32)}
      viewBox="0 0 32 32"
      fill="none"
    >
      <rect
        opacity="0.01"
        width="32"
        height="32"
        fill="white"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.4037 6.11602C5.71861 4.64295 7.58886 3.8999 9.74545 3.8999C12.5313 3.8999 14.5934 5.27565 16 6.87503C17.4066 5.27565 19.4687 3.8999 22.2545 3.8999C24.4111 3.8999 26.2814 4.64295 27.5963 6.11602C28.8918 7.56736 29.5 9.56006 29.5 11.7999C29.5 14.0101 28.585 16.1016 27.3731 17.9195C26.1536 19.7486 24.5556 21.4179 23.0034 22.8148C21.4452 24.2173 19.8937 25.3803 18.7352 26.1913C18.1546 26.5977 17.6693 26.918 17.3268 27.1382C17.1554 27.2484 17.0196 27.3336 16.9252 27.3921C16.878 27.4214 16.8411 27.444 16.8153 27.4598L16.7849 27.4782L16.7762 27.4835L16.7734 27.4851L16.7724 27.4857C16.7724 27.4857 16.7717 27.4861 16 26.1999C15.2235 27.4833 15.2229 27.4829 15.2229 27.4829L15.2219 27.4823L15.2192 27.4806L15.2104 27.4753L15.1802 27.4568C15.1544 27.441 15.1176 27.4182 15.0704 27.3887C14.9761 27.3298 14.8403 27.244 14.6691 27.1331C14.3268 26.9115 13.8418 26.5891 13.2614 26.1804C12.1034 25.365 10.5525 24.1966 8.99502 22.791C7.44362 21.3908 5.84642 19.7203 4.62757 17.8951C3.41692 16.0822 2.5 13.9974 2.5 11.7999C2.5 9.56006 3.10817 7.56736 4.4037 6.11602ZM16 26.1999L15.2229 27.4829C15.6985 27.7707 16.2957 27.7718 16.7724 27.4857L16 26.1999ZM16.0029 24.4206C16.2815 24.2376 16.6244 24.0068 17.0148 23.7336C18.1063 22.9695 19.5548 21.8825 20.9966 20.585C22.4444 19.2819 23.8464 17.8012 24.8769 16.2554C25.915 14.6982 26.5 13.1897 26.5 11.7999C26.5 10.0797 26.0354 8.87244 25.3582 8.11379C24.7004 7.37685 23.698 6.8999 22.2545 6.8999C19.9649 6.8999 18.3149 8.43391 17.2984 10.191C17.0303 10.6545 16.5354 10.9399 16 10.9399C15.4646 10.9399 14.9697 10.6545 14.7016 10.191C13.6851 8.43391 12.0351 6.8999 9.74545 6.8999C8.30205 6.8999 7.29957 7.37685 6.64176 8.11379C5.96455 8.87244 5.5 10.0797 5.5 11.7999C5.5 13.1724 6.08308 14.6726 7.12243 16.2291C8.15358 17.7732 9.55638 19.2565 11.005 20.5638C12.4475 21.8657 13.8966 22.9586 14.9886 23.7275C15.3801 24.0032 15.7239 24.236 16.0029 24.4206Z"
        fill="currentColor"
      />
    </LikeSvg>
  )
};
const LikeCount = styled.span`
  display: inline-block;
  vertical-align: middle;
  margin-left: ${rem(8)};
  font-size: ${rem(24)};
`;


export class LofterPostLike extends React.Component<{
  post: PostDetail
}> {
  render () {
    const {
      post
    } = this.props;

    const count = post?.postCountView?.favoriteCount;
    return (
      <Container>
        <LikeIcon />
        <LikeCount>{count}</LikeCount>
      </Container>
    )
  }
}