// react-hook-form
import { Control, Controller, UseFormSetValue } from "react-hook-form";
// components
import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
// types
import { IAnalyticsParams, IProject } from "types";

type Props = {
  control: Control<IAnalyticsParams, any>;
  setValue: UseFormSetValue<IAnalyticsParams>;
  projects: IProject[];
  params: IAnalyticsParams;
  fullScreen: boolean;
  isProjectLevel: boolean;
};

export const AnalyticsSelectBar: React.FC<Props> = ({
  control,
  setValue,
  projects,
  params,
  fullScreen,
  isProjectLevel,
}) => (
  <div
    className={`grid items-center gap-4 px-5 py-2.5 ${
      isProjectLevel ? "grid-cols-3" : "grid-cols-2"
    } ${fullScreen ? "lg:grid-cols-4 md:py-5" : ""}`}
  >
    {!isProjectLevel && (
      <div>
        <h6 className="text-xs text-custom-text-200">Project</h6>
        <Controller
          name="project"
          control={control}
          render={({ field: { value, onChange } }) => (
            <SelectProject value={value} onChange={onChange} projects={projects} />
          )}
        />
      </div>
    )}
    <div>
      <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
      <Controller
        name="y_axis"
        control={control}
        render={({ field: { value, onChange } }) => (
          <SelectYAxis value={value} onChange={onChange} />
        )}
      />
    </div>
    <div>
      <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
      <Controller
        name="x_axis"
        control={control}
        render={({ field: { value, onChange } }) => (
          <SelectXAxis
            value={value}
            onChange={(val: string) => {
              if (params.segment === val) setValue("segment", null);

              onChange(val);
            }}
          />
        )}
      />
    </div>
    <div>
      <h6 className="text-xs text-custom-text-200">Group</h6>
      <Controller
        name="segment"
        control={control}
        render={({ field: { value, onChange } }) => (
          <SelectSegment value={value} onChange={onChange} params={params} />
        )}
      />
    </div>
  </div>
);