import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import VideoThumbImage from 'components/VideoThumbImage'
import { cleanString } from 'helpers/stringHelpers'
import Link from 'components/Link'
import { Color } from 'constants/css'
import LongText from 'components/Texts/LongText'
import Embedly from 'components/Embedly'

Result.propTypes = {
  closeSearch: PropTypes.func.isRequired,
  type: PropTypes.string.isRequired,
  result: PropTypes.object.isRequired
}
export default function Result({ closeSearch, type, result }) {
  return (
    <Link
      style={{ textDecoration: 'none', marginBottom: '1rem' }}
      to={`/${type === 'url' ? 'link' : type}s/${result.id}`}
      onClick={closeSearch}
    >
      <div
        style={{
          display: 'flex',
          width: '100%',
          fontSize: '1.3rem',
          background: '#fff'
        }}
      >
        {type !== 'question' &&
          type !== 'url' && (
            <div style={{ width: '25%' }}>
              {type === 'video' && (
                <VideoThumbImage
                  isStarred={!!result.isStarred}
                  videoId={result.id}
                  src={`https://img.youtube.com/vi/${
                    result.content
                  }/mqdefault.jpg`}
                />
              )}
              {type === 'discussion' && (
                <VideoThumbImage
                  isStarred={!!(result.rootObj || {}).isStarred}
                  videoId={(result.rootObj || {}).id}
                  src={`https://img.youtube.com/vi/${
                    (result.rootObj || {}).content
                  }/mqdefault.jpg`}
                />
              )}
            </div>
          )}
        <div
          style={{
            width: type !== 'question' && type !== 'url' ? '75%' : '100%',
            padding: '1rem'
          }}
        >
          {type === 'video' && (
            <Fragment>
              <div>
                <p
                  style={{
                    fontSize: '1.7rem',
                    fontWeight: 'bold',
                    lineHeight: 1.5,
                    color: Color.blue()
                  }}
                >
                  {cleanString(result.title)}
                </p>
                <p style={{ color: Color.gray() }}>
                  Uploaded by {result.uploader.username}
                </p>
              </div>
              <div
                style={{
                  marginTop: '1rem',
                  color: Color.darkGray()
                }}
              >
                <LongText noExpend maxLines={4}>
                  {result.description}
                </LongText>
              </div>
            </Fragment>
          )}
          {type === 'question' && (
            <div
              style={{
                minHeight: '8vh',
                display: 'flex',
                alignItems: 'center',
                width: '100%'
              }}
            >
              <div
                style={{
                  width: '100%',
                  textAlign: 'center'
                }}
              >
                <LongText
                  noExpand
                  maxLines={4}
                  style={{
                    fontWeight: 'bold',
                    fontSize: '2.5rem',
                    color: Color.green()
                  }}
                >
                  {result.content}
                </LongText>
                <div
                  style={{
                    fontWeight: 'normal',
                    marginTop: '0.5rem',
                    color: Color.gray()
                  }}
                >
                  asked by {result.uploader.username}
                </div>
              </div>
            </div>
          )}
          {type === 'discussion' && (
            <div>
              <LongText
                noExpand
                maxLines={4}
                style={{
                  fontWeight: 'bold',
                  fontSize: '2rem',
                  color: Color.green()
                }}
              >
                {result.title}
              </LongText>
              <p style={{ color: Color.gray() }}>
                Posted by {result.uploader.username}
              </p>
              <div
                style={{
                  marginTop: '1rem',
                  color: Color.darkGray()
                }}
              >
                <LongText noExpend maxLines={4}>
                  {result.description}
                </LongText>
              </div>
            </div>
          )}
          {type === 'url' && (
            <Embedly
              small
              title={cleanString(result.title)}
              url={result.content}
              {...result}
            />
          )}
        </div>
      </div>
    </Link>
  )
}

@@ -1843,16 +1843,81 @@
 : '1rem'
+,%0A            ...(type === 'url' ? %7B paddingTop: '0.5rem' %7D : %7B%7D)
 %0A       
@@ -4702,32 +4702,273 @@
  === 'url' && (%0A
+            %3Cdiv%3E%0A              %3Cspan%0A                style=%7B%7B%0A                  fontWeight: 'bold',%0A                  fontSize: '1.5rem'%0A                %7D%7D%0A              %3E%0A                %7BcleanString(result.title)%7D%0A              %3C/span%3E%0A  
             %3CEmb
@@ -4972,16 +4972,18 @@
 Embedly%0A
+  
         
@@ -4994,16 +4994,66 @@
   small%0A
+                style=%7B%7B marginTop: '0.5rem' %7D%7D%0A  
         
@@ -5106,16 +5106,18 @@
         
+ 
+ 
 url=%7Bres
@@ -5143,16 +5143,18 @@
         
+  
 %7B...resu
@@ -5157,16 +5157,18 @@
 result%7D%0A
+  
         
@@ -5166,32 +5166,51 @@
              /%3E%0A
+            %3C/div%3E%0A
           )%7D%0A   

make correct link title appear for link search results