import React, { useEffect } from 'react'
import parse from 'html-react-parser'
import axios from 'axios'
import AppContainer from '../../appContainer'
import { FiChevronLeft, FiUser } from 'react-icons/fi'
import Link from 'next/link'
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardImage,
  MDBCardText,
  MDBCardTitle,
  MDBCol,
  MDBContainer,
  MDBListGroupItem,
  MDBRow,
  MDBTypography
} from 'mdb-react-ui-kit'
import Image from 'next/image'
import { AppFile, AppUrl } from '../../../lib/api'
import { newsSeo } from '../../../lib/seo'
import { Tag, TagLabel, HStack } from '@chakra-ui/react'

const moment = require('moment-jalaali')

const News = ({ post }) => {
  const Parallax = ({ quality }) => {
    return AppFile(`panel-public/uploads/${post.cover}`)
  }
  return (
    <AppContainer title={post.title}>
      <div className='parallax-container'>
        <h1
          style={{ width: '95%', lineHeight: '2' }}
          className={'center-align text-white service-text font-weight-bold header_back'}
        >
          {post.title}{' '}
        </h1>
        <Image
          loader={Parallax}
          src='Parallax.png'
          className={'responsive-img shadow-5'}
          alt={post.title}
          width={2050}
          height={1050}
          priority
        />
      </div>
      <br />
      <div className='lg:mx-20 sm:mx-5'> 
      <div className={'RTL bk image_center responsive-img'}>
          <style jsx>
            {`
              * {
                font-weight: 800;
                font-family: yekanBakh !important;
              }
              * span span span {
                background-color: red;
                color: red;
              }

              img {
                max-width: 100% !important;
                height: auto !important;
              }
            `}
          </style>
          <MDBRow className='row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>
            <MDBCol className='shadow-md' xs={12} md={12} lg={9}>
              <div style={{ borderTop: '4px solid #39a2a5', borderRadius: 0 }}>
                <div>
                  <MDBCardTitle className={'flex align-items-center m-3 justify-content-between'}>
                    <div>{post.title}</div>
                  </MDBCardTitle>
                  <hr />
                  <br />
                  <div
                    className='text-right  text-base   news-content right !bk-light '
                    style={{ direction: 'rtl', lineHeight: '2.3' }}
                  >
                    <div className='text-justify sm:ml-5'>
                    {parse(post.text.replace('/n', ' '))}
                    </div>
                    <hr />
                    <HStack className='flex sm:flex-col mb-3' spacing={4}>
                      <Tag size='md' className='flex gap-x-10' borderRadius='full'>
                        <TagLabel className='text-sm p-2'>سرمایه گذاری</TagLabel>
                      </Tag>
                      <Tag size='md' className='flex gap-x-10' borderRadius='full'>
                        <TagLabel className='text-sm p-2'>بیمارستان پرند </TagLabel>
                      </Tag>
                      <Tag size='md' className='flex gap-x-10' borderRadius='full'>
                        <TagLabel className='text-sm p-2'>شهر پرند </TagLabel>
                      </Tag>
                      
                    </HStack>
                  </div>
                </div>
              </div>
            </MDBCol>
            <MDBCol xs={12} md={12} lg={3}>
              {/* <Link href={'https://panel.mehriranianco.ir/welcome'}>
                <MDBCardImage
                  className={'rounded-6 cursor-pointer'}
                  style={{ width: 512, height: 275 }}
                  src={'/resource/images/price-anim.gif'}
                />
              </Link> */}
              {/* <Link href={'https://panel.mehriranianco.ir/welcome'}>
                <MDBCardImage
                  className={'rounded-6 cursor-pointer mt-3'}
                  style={{ width: 512, height: 275 }}
                  src={'/resource/images/SequenceyEKTANET.gif'}
                />
              </Link> */}
              <MDBCard shadow='5' border='info' className={'border mt-4'}>
                <MDBCardBody>
                  <MDBCardTitle>مطالب اخیر </MDBCardTitle>
                  <hr />
                  <MDBCardText className={'mt-4'}>
                    {/* <Link href={'https://panel.mehriranianco.ir/welcome'}>
                      <MDBListGroupItem style={{ cursor: 'pointer' }} className={'border-none bk-light p-1'}>
                        <FiChevronLeft />
                        خرید سهام
                      </MDBListGroupItem>
                    </Link> */}
                    <Link href={'/page/news/34'}>
                      <MDBListGroupItem style={{ cursor: 'pointer' }} className={'border-none bk-light p-1'}>
                        <FiChevronLeft />
                        انتقال سهام
                      </MDBListGroupItem>
                    </Link>

                    <MDBListGroupItem className={'border-none bk-light p-1'}>
                      <FiChevronLeft />
                      <a className={'bk-light text-black'} download href={'./take-stock.pdf'}>
                        دفترچه سهام
                      </a>
                    </MDBListGroupItem>
                    <MDBListGroupItem className={'border-none bk-light p-1'}>
                      <FiChevronLeft />
                      <a
                        className={'bk-light text-black'}
                        download
                        href={'./Explanatory_plan_of_Mehr_ranian_Parand_Hospital.pdf'}
                      >
                        دانلود طرح توجیهی
                      </a>
                    </MDBListGroupItem>
                  </MDBCardText>
                </MDBCardBody>
              </MDBCard>
            </MDBCol>
          </MDBRow>
          <br />
          <hr />
          <MDBTypography className='dana font-light'>
            تاریخ انتشار :{moment(post.created_at, 'YYYY-M-D HH:mm:ss').format('HH:mm - jYYYY/jM/jD')}
          </MDBTypography>
        </div>
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </AppContainer>
  )
}

export default News

export const getServerSideProps = async context => {
  const { slug } = context.params
  try {
    const { data: post } = await axios.get(AppUrl(`news/${encodeURIComponent(slug)}`), { timeout: 10000 })
    if (!post || !post.title || typeof post.text !== 'string') return { notFound: true }
    return { props: { post, seo: newsSeo(post, slug) } }
  } catch (error) {
    if (error.response && error.response.status === 404) return { notFound: true }
    // Temporary upstream failures must stay 5xx rather than removing real articles from search.
    throw error
  }
}