import { select, group, mean } from 'd3';
import './styles.css';
import { viz } from './viz.js';
import { data } from '@Sreelikhith/jobs_in_datascience';

export const main = (container) => {
  const filtersButtonContainer = select(container)
    .append('div')
    .attr('class', 'filters-button-container');

  const filtersButton = filtersButtonContainer
    .append('button')
    .text('Filters')
    .attr('class', 'btn btn-primary toggle-filters')
    .on('click', function() {
      filtersContainer.style('display', filtersContainer.style('display') === 'none' ? 'flex' : 'none');
    });

  const filtersContainer = select(container)
    .append('div')
    .attr('class', 'filters-container')
    .style('display', 'none')
    .style('flex-wrap', 'wrap')
    .style('justify-content', 'space-around');

  const addFilter = (labelText, filterId, dataMapFunc, defaultOption) => {
    const selectMenu = filtersContainer
      .append('div')
      .attr('class', 'filter')
      .append('label')
      .attr('for', filterId)
      .text(labelText + ': ')
      .append('select')
      .attr('id', filterId)
      .attr('class', 'form-control dropdown')
      .on('change', function() {
        updateChart();
      });

    selectMenu
      .selectAll('option')
      .data([defaultOption, ...Array.from(new Set(data.map(dataMapFunc))).sort()])
      .join('option')
      .text((d) => d);
  };

  addFilter('Company Size', 'company-size-dropdown', (d) => d.company_size, 'All Sizes');
  addFilter('Experience', 'experience-dropdown', (d) => d.experience_level, 'Any Experience');
  addFilter('Job Category', 'category-dropdown', (d) => d.job_category, 'All Categories');
  addFilter('Employment Type', 'employment-dropdown', (d) => d.employment_type, 'Any Type');
  addFilter('Work Setting', 'work-setting-dropdown', (d) => d.work_setting, 'Any Setting');
  addFilter('Employee Residence', 'employee-residence-dropdown', (d) => d.employee_residence, 'Any Residence');

  const svgContainer = select(container).append('div')
    .attr('class', 'svg-container')
    .style('width', '100%')
    .style('height', '95%');

  const svg = svgContainer
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('viewBox', `0 0 ${container.clientWidth} ${container.clientHeight}`)
    .attr('preserveAspectRatio', 'xMidYMid meet');

  const updateChart = () => {
    const selectedCategory = select('#category-dropdown').property('value');
    const selectedLevel = select('#experience-dropdown').property('value');
    const selectedEmploymentType = select('#employment-dropdown').property('value');
    const selectedWorkSetting = select('#work-setting-dropdown').property('value');
    const selectedResidence = select('#employee-residence-dropdown').property('value');
    const selectedCompanySize = select('#company-size-dropdown').property('value');

    let filteredData = data.filter(d =>
      (selectedCategory === 'All Categories' || d.job_category === selectedCategory) &&
      (selectedLevel === 'Any Experience' || d.experience_level === selectedLevel) &&
      (selectedEmploymentType === 'Any Type' || d.employment_type === selectedEmploymentType) &&
      (selectedWorkSetting === 'Any Setting' || d.work_setting === selectedWorkSetting) &&
      (selectedResidence === 'Any Residence' || d.employee_residence === selectedResidence) &&
      (selectedCompanySize === 'All Sizes' || d.company_size === selectedCompanySize));

    let groupedData = group(filteredData, d => d.job_title);
    let avgSalaryData = Array.from(groupedData, ([key, value]) => ({
      key: key,
      avgSalary: mean(value, v => v.salary_in_usd),
    })).sort((a, b) => b.avgSalary - a.avgSalary);

    viz(svg, {
      data: avgSalaryData,
      xValue: d => d.key,
      yValue: d => d.avgSalary,
      xAxisLabelText: 'Job Titles',
      yAxisLabelText: 'Average Salary in USD',
      marginLeft: 100,
      marginTop: 20,
      marginRight: 20,
      marginBottom: 160,
      width: parseInt(svg.style('width')),
      height: parseInt(svg.style('height')),
      innerRectFill: '#f8f9fa',
    });
  };

  window.addEventListener('resize', () => {
    svg.attr('viewBox', `0 0 ${container.clientWidth} ${container.clientHeight}`);
    updateChart();
  });

  updateChart();
};

main(document.body);