import Plot from 'react-plotly.js';
import { merge } from 'lodash';
import './custom.css';

interface Props {
  dataChart: Chart;
}

const baseLayoutProps = {
  paper_bgcolor: '#212633',
  plot_bgcolor: '#212633',
  legend: {
    font: {
      color: '#FFFFFF',
    },
  },
  title: {
    font: {
      color: '#FFFFFF',
    },
  },
  yaxis: {
    titlefont: {
      color: '#FFFFFF',
    },
    tickfont: {
      color: '#FFFFFF',
    },
    gridcolor: '#212633',
  },
  xaxis: {
    titlefont: {
      color: '#FFFFFF',
    },
    tickfont: {
      color: '#FFFFFF',
    },
    gridcolor: '#212633',
  },
};

function ChartElement({ dataChart }: Readonly<Props>) {
  const { data = [], layout = {} } = dataChart ?? {};

  console.log(dataChart);

  const layoutConfig = merge(baseLayoutProps, layout);

  return (
    <div className="flex w-full justify-center">
      <Plot data={data} layout={{ ...layoutConfig }} />
    </div>
  );
}

export default ChartElement;