import React from 'react';

import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import compose from 'recompose/compose';
import format from 'date-fns/fp/format';
import compareDesc from 'date-fns/compareDesc';
import susun from 'lodash/fp/compose';

import { nameAddressSelector } from 'utils/selector/profileSelector';
import getHospitalId from 'utils/selector/hospitalIdSelector';
import { getExpiredDateByMedicineId } from 'api/apotek';
import { getPracticeListByHospitalId } from 'api/setting';
import Modal from 'components/Modal';
import exportXL from 'components/office/contents/report/utils/exportXL';

const tanggal = format('DD-MM-YYYY');

const styles = () => ({
  paper: {
    position: 'absolute',
    border: '1px solid black',
  },
  titleSection: {
    padding: '0 32',
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'column',
    borderBottom: '1px solid black',
  },
  titleItem: {
    padding: 0,
    margin: 0,
  },
  font: {
    margin: '0 !important',
    padding: '0 !important',
  },
});

const Styled = withStyles(styles);

const getLastExpiredDate = expiredDates => (resep) => {
  if (expiredDates.length > 0) {
    const lastExpired = expiredDates.sort((exp1, exp2) =>
      compareDesc(exp1.expiredDate, exp2.expiredDate),
    )[0].expiredDate;
    const newResep = { ...resep, expiredDate: lastExpired };
    return newResep;
  }
  return resep;
};

const getMatchingPracticeList = practiceList => (resep) => {
  console.log({ practiceList, resep });
  if (practiceList.items.length > 0) {
    const praktik = practiceList.items.find(
      praktek => praktek.id === resep.practiceId,
    );
    console.log({ praktik });
    return { ...resep, SIP: praktik.Dokters.registrasiSIP[0].nomer };
  }
  return resep;
};

const LabelObat = Styled((props) => {
  const { classes, obat, i, title, ukuran } = props;
  const font = {
    fontSize: '11px',
  };
  return (
    <div
      className={`${classes.paper} printStruk`}
      style={{
        top: i !== 0 ? `${i * (ukuran.height + 20)}mm` : '0',
        width: `${ukuran.width === 50 ? ukuran.width + 25 : ukuran.width + 35}mm `,
        height: `${ukuran.height + 20}mm `,
      }}
      key={obat.id}
    >
      <div className={classes.titleSection}>
        <p style={font} className={classes.titleItem}>{title.name}</p>
        <p style={font} className={classes.titleItem}>{title.address}</p>
        <p style={font} className={classes.titleItem}>
          Apoteker: {obat.updatedName ? obat.updatedName : '-'}
        </p>
        <p style={font} className={classes.titleItem}>SIK: {obat.SIP}</p>
      </div>
      <Grid container style={{ margin: 5 }}>
        <Grid className={classes.font} style={font} item xs={8}>
          No. {obat.milis}
        </Grid>
        <Grid className={classes.font} style={font} item xs={4}>
          Tgl. {tanggal(new Date(obat.createdAt))}
        </Grid>
      </Grid>
      <Grid container>
        <Grid item xs={2}>
          &nbsp;
        </Grid>
        <Grid className={classes.font} style={font} item xs={8}>
          Nama: {obat.Mrs.Patients.nama}({obat.mrNo})
        </Grid>
        <Grid className={classes.font} style={font} item xs={2}>
         &nbsp;
        </Grid>
      </Grid>
      <Grid container>
        <Grid item xs={2}>
          &nbsp;
        </Grid>
        <Grid className={classes.font} style={font} item xs={4}>
          {obat.medicineName}
        </Grid>
        <Grid className={classes.font} style={font} item xs={4}>
          {obat.quantity} {obat.unit}
        </Grid>
        <Grid className={classes.font} style={font} item xs={2}>
          &nbsp;
        </Grid>
      </Grid>
      <Grid container>
        <Grid item xs={2}>
          &nbsp;
        </Grid>
        <Grid className={classes.font} style={font} item xs={8}>
          X
        </Grid>
        <Grid className={classes.font} style={font} item xs={2}>
          &nbsp;
        </Grid>
      </Grid>
      <div style={{ ...font, padding: '0 1em', margin: 0 }}>
        ED: {obat.expiredDate ? tanggal(new Date(obat.expiredDate)) : null}
      </div>
      <div
        className={classes.font}
        style={{
          ...font,
          display: 'flex',
          justifyContent: 'center',
          flexDirection: 'column',
          alignItems: 'center',
          alignContent: 'stretch',
          padding: 0,
          margin: 0,
        }}
      >
        <p style={{ margin: 0 }}>Sebelum / Saat / Sesudah Makan</p>
        <p style={{ margin: 0 }}>Semoga Lekas Sembuh</p>
        <p style={{ margin: 0, marginBottom: 5 }}>Jauhkan Dari Jangkauan Anak Anak</p>
      </div>
    </div>
  );
});

class PrintLabel extends React.Component {
  state = {
    openPrint: false,
    openDialog: false,
    obat: [],
    ukuran: {
      width: 50,
      height: 40,
    },
    jumlahPrint: 0,
    isFromEmr: !!this.props.dataObat.Mrs.Appointments,
  };

  componentDidMount() {
    const close = susun(
      this.closePrint,
      this.closeDialog,
    );
    window.addEventListener('afterprint', close);
  }

  componentWillUnmount() {
    const close = susun(
      this.closePrint,
      this.closeDialog,
    );
    window.addEventListener('afterprint', close);
  }

  setUkuranKertas = payload => this.setState({ ukuran: payload })

  openDialog = () => this.setState({ openDialog: true })
  closeDialog = () => this.setState({ openDialog: false })

  generateData = (cb) => {
    const { dataObat, hospitalId } = this.props;
    const obat = dataObat.Mrs.Prescriptions.map(resep =>
      Promise.all([
        getExpiredDateByMedicineId(resep.medicineId),
        getPracticeListByHospitalId(hospitalId),
      ])
        .then(([expiredDates, practiceList]) =>
          Promise.resolve([expiredDates.data, practiceList.data]),
        )
        .then(([expiredDates, practiceList]) => {
          const resepWithExpiredDates = getLastExpiredDate(expiredDates);
          const praktikSIP = getMatchingPracticeList(practiceList);
          const execute = susun(resepWithExpiredDates, praktikSIP);
          return execute(resep);
        })
        .catch(err => console.error(err)),
    );
    const racik = dataObat.Mrs.ScourPrescriptions.map(racikan =>
      getPracticeListByHospitalId(hospitalId)
        .then(practiceList => Promise.resolve(practiceList.data))
        .then(practiceList => getMatchingPracticeList(practiceList)(racikan))
        .catch(err => console.error(err)),
    );
    Promise.all([...obat, ...racik])
      .then(resep => cb(resep))
      .catch(err => console.error(err));
  }

  openPrint = ukuran => () => {
    this.generateData(resep => this.setState(
      { obat: resep, openPrint: true, ukuran },
    ));
  };
  closePrint = () => this.setState({ openPrint: false });

  formatObat = (payload) => {
    const { title, dataObat } = this.props;
    const formatObat = resepObat => ({
      'Nama Klinik': title.name,
      'Alamat Klinik': title.address,
      Apoteker: resepObat.updatedName || '-',
      SIK: resepObat.SIP,
      Nomor: resepObat.milis,
      Tanggal: tanggal(new Date(resepObat.createdAt)),
      'Nama Pasien': resepObat.Mrs.Patients.nama,
      'Nomor MR Pasien': resepObat.mrNo,
      'Nama Obat': resepObat.medicineName,
      'Jumlah Obat': resepObat.quantity,
      'Satuan Obat': resepObat.unit,
      'Tanggal Kadaluarsa': resepObat.expiredDate ? tanggal(new Date(resepObat.expiredDate)) : '-',
      'Keterangan 1': 'Sebelum / Sesudah Makan',
      'Keterangan 2': 'Semoga Lekas Sembuh',
      'Keterangan 3': 'Jauhkan dari Jangkauan Anak-Anak',
    });
    const presc = payload.map((resep) => {
      const obat = { ...dataObat, ...resep };
      return formatObat(obat);
    });

    return presc;
  }

  exportExcel = () => {
    this.generateData((resep) => {
      const json = this.formatObat(resep);
      exportXL('Label Obat', json);
    });
  }

  openPrintDialog = payload => () => {
    const { title, dataObat, hospitalId } = this.props;
    const { jumlahPrint } = this.state;
    let obat = dataObat.Mrs.Prescriptions.map(resep =>
    Promise.all([
      getExpiredDateByMedicineId(resep.medicineId),
      getPracticeListByHospitalId(hospitalId),
    ])
      .then(([expiredDates, practiceList]) =>
        Promise.resolve([expiredDates.data, practiceList.data]),
      )
      .then(([expiredDates, practiceList]) => {
        const resepWithExpiredDates = getLastExpiredDate(expiredDates);
        const praktikSIP = getMatchingPracticeList(practiceList);
        const execute = susun(resepWithExpiredDates, praktikSIP);
        return execute(resep);
      })
      .catch(err => console.error(err)),
    );
    Promise.all(obat)
      .then((resep) => {
        obat = [...resep, ...dataObat.Mrs.ScourPrescriptions];
        const LabelObatTitled = props =>
          <LabelObat {...props} title={title} />;
        this.props.openPrintDialog({
          body: (
            <LabelObatTitled
              obat={{
                ...dataObat,
                expiredDate: obat[jumlahPrint].expiredDate,
                SIP: obat[jumlahPrint].SIP,
                medicineName: obat[jumlahPrint].medicineName,
                unit: obat[jumlahPrint].unit,
                quantity: obat[jumlahPrint].quantity,
                mrNo: obat[jumlahPrint].mrNo,
                cignaLabel: obat[jumlahPrint].cignaLabel,
              }}
              key={obat[jumlahPrint].id}
              ukuran={payload}
              i={jumlahPrint}
            />
          ),
          cb: () => {
            if (jumlahPrint < obat.length) {
              this.setState({ jumlahPrint: jumlahPrint + 1 }, () => {
                this.openPrintDialog(payload);
              });
            }
          },
        });
      },
      ).catch(err => console.error(err));
  }

  render() {
    const { openDialog, openPrint } = this.state;
    const { dataObat, title } = this.props;
    const isDisabled = dataObat.status !== 'succeed';
    const LabelObatTitled = props =>
      <LabelObat {...props} title={title} />;
    return (
      <React.Fragment>
        {
          this.state.isFromEmr &&
          <Button
            onClick={this.openDialog}
            disabled={isDisabled}
            style={{ display: isDisabled ? 'none' : 'initial' }}
            variant="outlined"
          >
            Label
          </Button>
        }
        <Dialog className="hideForPrint" open={openDialog} onClose={this.closeDialog}>
          <DialogTitle>Pilih Ukuran Kertas Anda</DialogTitle>
          <DialogActions>
            <Button onClick={this.openPrint({ width: 70, height: 40 })} >70 x 40 mm</Button>
            <Button onClick={this.openPrint({ width: 65, height: 40 })}>65 x 40 mm</Button>
            <Button onClick={this.openPrint({ width: 50, height: 40 })}>50 x 40 mm</Button>
            <Button onClick={this.exportExcel}>Export Excel</Button>
          </DialogActions>
        </Dialog>
        {openPrint && (
          <Modal isOpen={openPrint}>
            <React.Fragment>
              {this.state.obat.map((obat, index) => (
                <LabelObatTitled
                  obat={{
                    ...dataObat,
                    expiredDate: obat.expiredDate,
                    SIP: obat.SIP,
                    medicineName: obat.medicineName,
                    unit: obat.unit,
                    quantity: obat.quantity,
                    mrNo: obat.mrNo,
                    cignaLabel: obat.cignaLabel,
                  }}
                  key={obat.id}
                  ukuran={this.state.ukuran}
                  i={index}
                />
                  ))}
            </React.Fragment>
          </Modal>
        )}
      </React.Fragment>
    );
  }
}

PrintLabel.propTypes = {
  title: PropTypes.object.isRequired,
  dataObat: PropTypes.object.isRequired,
  hospitalId: PropTypes.string.isRequired,
  openPrintDialog: PropTypes.func.isRequired,
};

const mapState = state => ({
  title: nameAddressSelector(state),
  hospitalId: getHospitalId(state),
});

const mapDispatch = dispatch => ({
  openPrintDialog: dispatch.print.openPrintDialog,
});

export default compose(connect(mapState, mapDispatch))(PrintLabel);