import React from "react";
import { Text, View, Image, StyleSheet } from "@react-pdf/renderer";
import numbro from "numbro";

const DisplayCustomerInformation = ({ billingDetails } = {}) => {
  return (
    <View style={Styles.rightColumn}>
      {[
        `Client: ${billingDetails.legalName || "NC"}`,
        billingDetails.billingAddress,
        // `${billingDetails.zipCode}, ${billingDetails.city}, ${billingDetails.countryCode}`,
        `TVA: ${billingDetails.taxIdentificationNumber || "NC"}`,
        `SIREN: ${billingDetails.SIREN || "NC"}`,
      ]
        .filter(Boolean)
        .map((line, index) => (
          <Text key={index} style={Styles.textParagraph}>
            {line}
          </Text>
        ))}
    </View>
  );
};

const RenderCompanyLogo = ({ logoBase64 } = {}) => {
  return (
    <Image src={`data:image/png;base64,${logoBase64}`} style={{ width: 200 }} />
  );
};

const RenderTermsOfSale = () => {
  return {
    title: "Conditions générales de vente",
    content: <Text style={Styles.textParagraph}>{"ICI TES CGV"}</Text>,
  };
};

const RenderCompanyInformation = ({ company }) => {
  return {
    title: "Informations du prestataire",
    content: (
      <Text style={Styles.textParagraph}>
        {`${company?.name}, ${company?.address}, ${company?.postalCode || "-"}, ${company?.city || "-"},\nSIRET: ${company?.identifier}, RCS: ${company?.city} ${company?.RCS}, TVA: ${company?.taxIdentifier || "-"}.\nPour toute question, vous pourrez nous contacter au ${company?.phoneNumber} ou à l'adresse ${company?.supportEmail}.`}
      </Text>
    ),
  };
};

const SignatureForm = () => {
  return {
    title: "Signature du client",
    content: (
      <>
        <Text style={Styles.textParagraph}>
          Fait à {"{{Ville de signature;font_size=12}}"}, le
          {" {{Date;type=datenow;font_size=12}}"}
        </Text>

        <Text style={Styles.textParagraph}>
          Nom et prénom du signataire:{" "}
          {"{{Nom et Prénom du signataire;font_size=12}}"}
        </Text>

        <Text style={Styles.textParagraph}>
          Fonction du signataire: {"{{Fonction du signataire;font_size=12}}"}
        </Text>

        <Text style={Styles.textParagraph}>
          Téléphone: {"{{type=phone;required=true;font_size=12}}"}
        </Text>

        <Text style={Styles.textParagraph}>Signature:</Text>

        <View style={Styles.signatureBox}>
          <Text>{"{{Sign;type=signature;width=200;height=50}}"}</Text>
        </View>
      </>
    ),
  };
};

const formatPrice = ({ amount = 0, average = false }) =>
  `${numbro(amount || 0).format({
    spaceSeparated: true,
    thousandSeparated: true,
    average,
    mantissa: average ? 1 : 2,
  })} €`;

const Styles = StyleSheet.create({
  body: {
    padding: 40,
    fontFamily: "Helvetica",
    fontSize: 12,
    lineHeight: 1.5,
    color: "#000",
  },
  section: { marginBottom: 30 },
  sectionTitle: { fontSize: 14, opacity: 0.5, marginBottom: 5 },
  textParagraph: { marginBottom: 5 },
  headerRow: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  leftColumn: { width: "50%", textAlign: "left" },
  rightColumn: { width: "50%", textAlign: "right" },
  table: { marginBottom: 20 },
  tableRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  tableColHeaderLeft: { width: "70%", fontWeight: "bold", textAlign: "left" },
  tableColHeaderRight: { width: "30%", fontWeight: "bold", textAlign: "right" },
  tableColLeft: { width: "70%", textAlign: "left" },
  tableColRight: { width: "30%", textAlign: "right" },
  summaryRow: {
    flexDirection: "row",
    justifyContent: "flex-end",
    marginTop: 10,
  },
  summaryLabel: {
    width: "70%",
    textAlign: "right",
    paddingRight: 10,
    fontWeight: "bold",
  },
  summaryValue: { width: "30%", textAlign: "right" },
  signatureBox: {
    width: 200,
    height: 50,
    borderWidth: 1,
    borderStyle: "solid",
  },
});

export {
  Styles,
  formatPrice,
  DisplayCustomerInformation,
  RenderTermsOfSale,
  RenderCompanyLogo,
  RenderCompanyInformation,
  SignatureForm,
};