import { LightningElement,track, api } from 'lwc';
import No_records_to_display from '@salesforce/label/c.No_records_to_display';
import Product from '@salesforce/label/c.Product';
import Order from '@salesforce/label/c.Order';
import Draft_Order from '@salesforce/label/c.Draft_Order';
import Customer from '@salesforce/label/c.Customer';
import Location from '@salesforce/label/c.Location';
import Collection from '@salesforce/label/c.Collection';
import Order_Number from '@salesforce/label/c.Order_Number';
import Status from '@salesforce/label/c.Status';
import Title from '@salesforce/label/c.Title';
import Created_At from '@salesforce/label/c.Created_At';
import Modified_At from '@salesforce/label/c.Modified_At';
import Name from '@salesforce/label/c.Name';
import First_Name from '@salesforce/label/c.First_Name';
import Last_Name from '@salesforce/label/c.Last_Name';
import Total_Orders from '@salesforce/label/c.Total_Orders';
import Published_at from '@salesforce/label/c.Published_at';
import Updated_at from '@salesforce/label/c.Updated_at';
import Total_Price from '@salesforce/label/c.Total_Price';
import Total_Discounts from '@salesforce/label/c.Total_Discounts';
import Country from '@salesforce/label/c.Country';
import Active from '@salesforce/label/c.Active';

export default class DisplayData extends LightningElement {

    // GLOBAL VARIABLES
    @api objectName;
    @api displayData;

    _objectData = [];

    // objectData is now a reactive setter: the Apex call in the parent (recordTypeMapping)
    // resolves AFTER this component first mounts, so processing must re-run whenever the
    // parent hands over new data — not just once in connectedCallback.
    @api
    get objectData() {
        return this._objectData;
    }
    set objectData(value) {
        this._objectData = value;
        this.processObjectData();
    }

    // LOCAL VARIABLES
    @track showDetail = false;
    @track column3;
    @track column4;
    @track column5;
    @track objectList = [];
    @track showJson;
    @track displayJson = false;
    @track errorMessage = false;
    @track label = {
        No_records_to_display ,
        Product, Order, Draft_Order,
        Customer, Location, Collection , Order_Number, Status , Title , Created_At , Modified_At , Name ,
        First_Name , Last_Name , Total_Orders , Published_at , Updated_at , Total_Price , Total_Discounts ,
        Country , Active 
    };
    
    //Handles the onclick of Object name bars on 'Import Sample Records' modal
    handleClick(){
       this.showDetail = !this.showDetail;
    }

    // DISPLAY-ONLY getters for the styled accordion header (no functional impact)
    get objectInitials() {
        return this.objectName ? this.objectName.substring(0, 2).toUpperCase() : '';
    }

    // ── Object icon selection ────────────────────────────────────────────────
    // Replaces the 2-letter initials avatar with the same brand SVG used for
    // each object on the Field Mapping / Object Setup pages. Compared against
    // the imported custom labels (same ones the parent passes down), matching
    // the existing objectName == this.label.X pattern in processObjectData(),
    // so it stays correct if the labels are translated.
    get isProductIcon()    { return this.objectName == this.label.Product; }
    get isCustomerIcon()   { return this.objectName == this.label.Customer; }
    get isCollectionIcon() { return this.objectName == this.label.Collection; }
    get isOrderIcon()      { return this.objectName == this.label.Order; }
    get isDraftOrderIcon() { return this.objectName == this.label.Draft_Order; }
    get isLocationIcon()   { return this.objectName == this.label.Location; }

    get recordCount() {
        return this.objectList ? this.objectList.length : 0;
    }

    //connected call back
    connectedCallback() {
        console.log('SYNC MADE EASY: Display Data Connected Callback');
        this.processObjectData();
    }

    //Processes objectData into objectList — runs on initial mount AND every time
    //the parent updates objectData (e.g. once the Shopify sample-data Apex call resolves).
    processObjectData() {
        // Reset so re-processing (on late-arriving data) doesn't duplicate rows
        this.objectList = [];
        if(this.objectData != '' && this.objectData != null && this.objectData.length > 0){
            this.errorMessage = true;
            if(this.objectName == this.label.Product){
            let index = 1;
            for(let product of this.objectData){
                this.objectList.push({srNumber:index, shopifyId:product.id, column3:product.title, column4:product.created_at, column5:product.updated_at, jsonBody:JSON.stringify(Object.keys(product).reverse().reduce((acc, key) => {
                    acc[key] = product[key];
                    return acc;
                }, {}), null, "\t")})
                index++;
                }
                this.column3 = this.label.Title;
                this.column4 = this.label.Created_At;
                this.column5 = this.label.Modified_At;

            }else if(this.objectName == this.label.Customer){
                let index = 1;
                for(let customer of this.objectData){
                    this.objectList.push({srNumber:index, shopifyId:customer.id, column3:customer.first_name, column4:customer.last_name, column5:customer.orders_count, jsonBody: JSON.stringify(Object.keys(customer).reverse().reduce((acc, key) => {
                        acc[key] = customer[key];
                        return acc;
                    }, {}), null, "\t")})
                    index++;
                }
                this.column3 = this.label.First_Name;
                this.column4 = this.label.Last_Name;
                this.column5 = this.label.Total_Orders;

            }else if(this.objectName == this.label.Collection){
                let index = 1;
                for(let collection of this.objectData){
                    this.objectList.push({srNumber:index, shopifyId:collection.id, column3:collection.title, column4:collection.published_at, column5:collection.updated_at, jsonBody: JSON.stringify(Object.keys(collection).reverse().reduce((acc, key) => {
                        acc[key] = collection[key];
                        return acc;
                    }, {}), null, "\t")})
                    index++;
                }
                this.column3 = this.label.Title;
                this.column4 = this.label.Published_at;
                this.column5 = this.label.Updated_at;
            }else if(this.objectName == this.label.Order){
                let index = 1;
                for(let order of this.objectData){
                    this.objectList.push({srNumber:index, shopifyId:order.id, column3:order.order_number, column4:order.total_price, column5:order.total_discounts, jsonBody: JSON.stringify(Object.keys(order).reverse().reduce((acc, key) => {
                        acc[key] = order[key];
                        return acc;
                    }, {}), null, "\t")})
                    index++;
                }
                this.column3 = this.label.Order_Number;
                this.column4 = this.label.Total_Price;
                this.column5 = this.label.Total_Discounts;
            }else if(this.objectName == this.label.Draft_Order){
                let index = 1;
                for(let draftorder of this.objectData){
                    this.objectList.push({srNumber:index, shopifyId:draftorder.id, column3:draftorder.name, column4:draftorder.status, column5:draftorder.created_at, jsonBody: JSON.stringify(Object.keys(draftorder).reverse().reduce((acc, key) => {
                        acc[key] = draftorder[key];
                        return acc;
                    }, {}), null, "\t")})
                    index++;
                }
                this.column3 = this.label.Name;
                this.column4 = this.label.Status;
                this.column5 = this.label.Created_At;
            }else if(this.objectName == this.label.Location){
                let index = 1;
                for(let location of this.objectData){
                    this.objectList.push({srNumber:index, shopifyId:location.id, column3:location.name, column4:location.country, column5:location.active, jsonBody: JSON.stringify(Object.keys(location).reverse().reduce((acc, key) => {
                        acc[key] = location[key];
                        return acc;
                    }, {}), null, "\t")})
                    index++;
                }
                this.column3 = this.label.Name;
                this.column4 = this.label.Country;
                this.column5 = this.label.Active;
            }
        }else{
           this.errorMessage = false; 
        }

    }

    //This method handles onclick on JSON button and show the JSON.
    jsonClick(event){
        this.displayJson = true;
        this.showJson = event.target.value;

        const sendEvent = new CustomEvent("getjsonvalue", {
            detail : this.displayJson   
        });

        this.dispatchEvent(sendEvent);

        const sendJsonEvent = new CustomEvent("sendjson", {
            detail : this.showJson
        });

        this.dispatchEvent(sendJsonEvent);
    }
}