import React, { useState, useEffect } from 'react';
import * as d3 from 'd3';
import { GoogleLogin } from 'react-google-login';

const ChannelGrowthChart = () => {
  // Define the YouTube API client ID
  const YOUTUBE_API_CLIENT_ID = 'AIzaSyBmSAKk546uXKEB3VKXmzhMqtvIclBvkwM';

  // Define the YouTube channel ID for which you want to visualize the channel growth through video success
  const CHANNEL_ID = 'UCrY4rBbh2eU6GQXVNsKoW7w';

  // Define the API endpoint for retrieving the video data
  const API_ENDPOINT = `https://www.googleapis.com/youtube/v3/search?key=${YOUTUBE_API_CLIENT_ID}&channelId=${CHANNEL_ID}&part=snippet,id&order=viewCount&maxResults=50`;

  // Define the D3.js chart dimensions
  const CHART_WIDTH = 600;
  const CHART_HEIGHT = 400;

  // Define the state variables for the video data and any error messages
  const [videoData, setVideoData] = useState(null);
  const [error, setError] = useState(null);

  // Define the Google login success handler function
  const googleLoginSuccessHandler = (response) => {
    // Initialize the YouTube API client with the user's access token
    gapi.load('client', () => {
      gapi.client.setToken({ access_token: response.accessToken });
      gapi.client.load('youtube', 'v3', () => {
        // Make a request to the YouTube API to get data about the channel's videos
        gapi.client.youtube.search.list({
          channelId: CHANNEL_ID,
          part: 'snippet,statistics',
          order: 'date',
          maxResults: 50,
        }).execute((response) => {
          if (response.error) {
            setError(response.error.message);
          } else {
            // Extract the video data from the API response
            const videoItems = response.items.map((item) => ({
              id: item.id.videoId,
              title: item.snippet.title,
              publishedAt: new Date(item.snippet.publishedAt),
              viewCount: parseInt(item.statistics.viewCount),
              likeCount: parseInt(item.statistics.likeCount),
            }));
            setVideoData(videoItems);
          }
        });
      });
    });
  };

  // Define the D3.js chart creation function
  const createChart = () => {
    if (videoData) {
      // Group the videos by month and calculate the total view and like counts for each month
      const videoGroups = d3.group(videoData, (video) => d3.timeMonth(video.publishedAt));
      const monthlyData = Array.from(videoGroups, ([month, videos]) => ({
        month,
        viewCount: d3.sum(videos, (video) => video.viewCount),
        likeCount: d3.sum(videos, (video) => video.likeCount),
      }));

      // Sort the monthly data by date
      monthlyData.sort((a, b) => d3.ascending(a.month, b.month));

      

// Create the D3.js scales and axes
      const xScale = d3.scaleTime()
        .domain([d3.min(monthlyData, (d) => d.month), d3.max(monthlyData, (d) => d.month)])
        .range([0, CHART_WIDTH]);

      const yScale = d3.scaleLinear()
        .domain([0, d3.max(monthlyData, (d) => Math.max(d.viewCount, d.likeCount))])
        .range([CHART_HEIGHT, 0]);

      const xAxis = d3.axisBottom(xScale);
      const yAxis = d3.axisLeft(yScale);

      // Create the D3.js line generators
      const lineGeneratorViewCount = d3.line()
        .x((d) => xScale(d.month))
        .y((d) => yScale(d.viewCount));

      const lineGeneratorLikeCount = d3.line()
        .x((d) => xScale(d.month))
        .y((d) => yScale(d.likeCount));

      // Create the D3.js SVG element and group
      const svg = d3.select('#channel-growth-chart')
        .append('svg')
        .attr('width', CHART_WIDTH)
        .attr('height', CHART_HEIGHT);

      const chartGroup = svg.append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

      // Append the x-axis
      chartGroup.append('g')
        .attr('class', 'x-axis')
        .attr('transform', `translate(0, ${CHART_HEIGHT})`)
        .call(xAxis);

      // Append the y-axis
      chartGroup.append('g')
        .attr('class', 'y-axis')
        .call(yAxis);

      // Append the line for view count
      chartGroup.append('path')
        .datum(monthlyData)
        .attr('class', 'line')
        .attr('d', lineGeneratorViewCount)
        .attr('fill', 'none')
        .attr('stroke', 'steelblue');

      // Append the line for like count
      chartGroup.append('path')
        .datum(monthlyData)
        .attr('class', 'line')
        .attr('d', lineGeneratorLikeCount)
        .attr('fill', 'none')
        .attr('stroke', 'green');
    }
  }, [videoData]);

  return (
    <div>
      <h2>Channel Growth</h2>
      {videoData === null && (
        <GoogleLogin
          clientId={YOUTUBE_API_CLIENT_ID}
          buttonText="Login with Google"
          onSuccess={googleLoginSuccessHandler}
        />
      )}
      {videoData !== null && (
        <div id="channel-growth-chart"></div>
      )}
    </div>
  );
};

export default ChannelGrowthChart;