import React, { FC, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import useTranslation from 'next-translate/useTranslation';
import { Button, Col, Image, Modal, Row } from 'antd';

import { ItemType } from '../../../../utils/CRUDBuilder/types';
import CRUDBuilder from '../../../../utils/CRUDBuilder/CRUDBuilder';

import { GetServerSideProps } from 'next';
import { FetchCitiesAsync, FetchWinnersAsync, selectCities, selectWinners } from '../../../../redux';
import { DashboardAuthenticated } from '../../../../utils/helpers/dashboard-authenticated';
import { City, User } from '../../../../models';
import { giftService } from '../../../../services/gift';
import LoadingData from '../../../../components/LoadingData';
import { DownloadSvg } from '../../../../utils/helpers/download-svg';
import { GiftItem } from '../../../../models/gift-item';

export const columnsCities: ItemType[] = [
  {
    columnType: {
      title: 'ID',
      dataIndex: 'id',
      fixed: 'left',
      width: 100,
    },
    type: 'primary-key',
  },
  {
    columnType: {
      title: 'Used',
      dataIndex: 'used',
      width: 'auto',
    },
    type: 'check-box',
  },
  {
    columnType: {
      title: 'User name',
      dataIndex: 'user',
      width: 'auto',
      render: (el: User) => <div dangerouslySetInnerHTML={{ __html: el?.first_name.toString() }} />,
    },
    type: 'foreign-key-obj',
  },
  {
    columnType: {
      title: 'User email',
      dataIndex: 'user',
      width: 'auto',
      render: (el: User) => <div dangerouslySetInnerHTML={{ __html: el?.email.toString() }} />,
    },
    type: 'foreign-key-obj',
  },
  {
    columnType: {
      title: 'User phone',
      dataIndex: 'user',
      width: 'auto',
      render: (el: User) => <div dangerouslySetInnerHTML={{ __html: el?.phone.toString() }} />,
    },
    type: 'foreign-key-obj',
  },
  {
    columnType: {
      title: 'Gift item image',
      dataIndex: 'gift_item',
      width: 'auto',
      render: (el: GiftItem) => el && <Image src={el.image} />,
    },
    type: 'foreign-key-obj',
  },
];

const ManageCities: FC = () => {
  const { lang } = useTranslation();
  const dispatch = useDispatch();

  const { winners, status } = useSelector(selectWinners);
  const { cities } = useSelector(selectCities);

  const [preview, setPreview] = useState<{
    previewVisible: boolean;
    previewImage?: React.ReactNode;
  }>({ previewVisible: false, previewImage: undefined });

  useEffect(() => {
    dispatch(FetchWinnersAsync());
    dispatch(FetchCitiesAsync());
  }, [dispatch]);

  let tmp: ItemType[] = [
    {
      columnType: {
        title: 'User city',
        dataIndex: 'user',
        width: 'auto',
        render: (el: User) =>
          el && <div dangerouslySetInnerHTML={{ __html: cities.find((e: City) => e.id === el.city_id)?.name! }} />,
      },
      type: 'foreign-key-obj',
    },
    {
      columnType: {
        title: 'Gift item name',
        dataIndex: 'gift_item',
        width: 'auto',
        render: (el: GiftItem) =>
          el && <div dangerouslySetInnerHTML={{ __html: lang === 'en' ? el?.['name:en'] : el['name:ar'] }} />,
      },
      type: 'foreign-key-obj',
    },
    {
      columnType: {
        title: 'Gift item description',
        dataIndex: 'gift_item',
        width: 'auto',
        render: (el: GiftItem) =>
          el && <div dangerouslySetInnerHTML={{ __html: lang === 'en' ? el['description:en'] : el['description:ar'] }} />,
      },
      type: 'foreign-key-obj',
    },
    {
      columnType: {
        title: 'Image',
        dataIndex: 'image_path',
        width: 200,
        render: (val: string) => (
          <Button
            type='default'
            size='large'
            onClick={() => {
              setPreview({ ...preview, previewVisible: true });
              const arr = val.split('/');
              const l = arr.length;
              const url = `${arr[l - 3]}/${arr[l - 2]}/${arr[l - 1]}`;
              giftService.ShowCode(url).then((el) => setPreview({ previewVisible: true, previewImage: el }));
            }}
          >
            Show
          </Button>
        ),
      },
      type: 'image',
    },
  ];

  return (
    <>
      <CRUDBuilder
        lang={lang === 'en' ? 'en' : 'ar'}
        items={winners}
        loading={status === 'loading'}
        itemsHeader={[...columnsCities, ...tmp]}
      />
      <Modal
        visible={preview.previewVisible}
        footer={null}
        onCancel={() => setPreview({ previewImage: undefined, previewVisible: false })}
      >
        <LoadingData dataValid={() => (preview.previewImage ? true : false)} loading={preview.previewImage ? false : true}>
          <Row justify='space-around' align='middle'>
            <Col>
              <img src={`data:image/png;base64, ${preview.previewImage}`} />
            </Col>
            <Col>
              <Button size='large' type='primary' onClick={() => DownloadSvg('#divv svg', 'QR')}>
                {'Download'}
              </Button>
            </Col>
          </Row>
        </LoadingData>
      </Modal>
    </>
  );
};
export default ManageCities;

export const getServerSideProps: GetServerSideProps = DashboardAuthenticated;