import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
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,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow,
  MDBTypography
} from 'mdb-react-ui-kit'
import Image from 'next/image'
import { AppFile, AppUrl } from '../../../lib/api'
import { Box, SimpleGrid } 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='Picture of the author'
          width={2050}
          height={1050}
          priority
        />
      </div>
      <br />
      <MDBContainer>
        <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 xs={12} md={12} lg={9}>
              <MDBCard style={{ borderTop: '4px solid #39a2a5', borderRadius: 0 }}>
                <MDBCardBody>
                  <MDBCardTitle className={'flex align-items-center justify-content-between'}>
                    <div>{post.title}</div>
                    
                  </MDBCardTitle>
                  <hr />
                  <br />
                  <MDBCardText className='text-right news-content right right-align' style={{ direction: 'rtl' }}>
                    {parse(post.text)}
                  </MDBCardText>
                </MDBCardBody>
              </MDBCard>
            </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/animation.gif.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={'/page/news/36'}>
                      <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>
                    <Link href={'/page/news/29'}>
                      <MDBListGroupItem 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>
            تاریخ انتشار :{moment(post.created_at, 'YYYY-M-D HH:mm:ss').format('HH:mm - jYYYY/jM/jD')}
          </MDBTypography>
        </div>
      </MDBContainer>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </AppContainer>
  )
}

export default News

export const getServerSideProps = async context => {
  const { query } = context
  const posData = await axios.get(AppUrl(`news/${query.slug}`))
  const post = await posData.data

  return {
    props: { post, fallback: false } // will be passed to the page component as props
  }
}