import * as React from 'react';
import { useTranslation } from 'next-i18next';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormHelperText from '@mui/material/FormHelperText';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { useSnackbar } from 'notistack';
import Skeleton from '@mui/material/Skeleton';
import Typography from '@mui/material/Typography';

import axios from 'src/lib/axios';
import logger from 'next-pino/logger';

import { OrgListItem } from 'src/types/cloud';

export interface ProjectItem {
  id: string;
  name: string;
  created_at: string;
  active_clusters_count: number;
  users_count: number;
  [x: string]: any;
}

export interface ClusterItem {
  id: string;
  name: string;
  created_at: string;
  display_status: string;
  is_dev_tier: boolean;
  version: string;
  status: string;
  [x: string]: any;
}

export default function TiDBCloudClusterForm(props: {
  onChange?: (data: {
    org: OrgListItem | null;
    project: ProjectItem | null;
    cluster: ClusterItem | null;
  }) => void;
}) {
  const { onChange } = props;

  const [orgs, setOrgs] = React.useState<OrgListItem[] | null>(null);
  const [org, setOrg] = React.useState('');
  const [projects, setProjects] = React.useState<ProjectItem[] | null>(null);
  const [project, setProject] = React.useState('');
  const [clusters, setClusters] = React.useState<ClusterItem[] | null>(null);
  const [cluster, setCluster] = React.useState('');

  const { t } = useTranslation();
  const { enqueueSnackbar } = useSnackbar();

  const handleOrgChange = (event: SelectChangeEvent) => {
    setOrg(event.target.value);
  };

  const handleProjectChange = (event: SelectChangeEvent) => {
    setProject(event.target.value);
  };

  const handleClusterChange = (event: SelectChangeEvent) => {
    setCluster(event.target.value);
  };

  // TODO: pagination
  React.useEffect(() => {
    const fetchOrgs = async () => {
      try {
        const data = await axios.get('/api/cloud/orgs').then((res) => res.data);
        setOrgs(data.data.orgs);
      } catch (error: any) {
        setOrgs([]);
        logger.error(
          { error, name: 'NewRequestSection/TiDBCloudClusterSection' },
          'Error fetching orgs from TiDB Cloud'
        );
        enqueueSnackbar(`${error?.response?.data?.message || error?.message}`, {
          variant: 'error',
        });
      }
    };

    fetchOrgs();
  }, [enqueueSnackbar]);

  // TODO: pagination
  React.useEffect(() => {
    const fetchProjects = async () => {
      setProject('');
      setCluster('');
      try {
        const data = await axios
          .get(`/api/cloud/orgs/${org}/projects`)
          .then((res) => res.data);
        setProjects(data.data.items);
      } catch (error: any) {
        setProjects([]);
        logger.error(
          { error, name: 'NewRequestSection/TiDBCloudClusterSection' },
          'Error fetching projects from TiDB Cloud'
        );
        enqueueSnackbar(`${error?.response?.data?.message || error?.message}`, {
          variant: 'error',
        });
      }
    };
    if (org) {
      fetchProjects();
    }
  }, [enqueueSnackbar, org]);

  // TODO: pagination
  React.useEffect(() => {
    // const orgItem = orgs?.find((item) => item.id === org);
    // console.log(orgItem);
    const fetchClusters = async () => {
      setCluster('');
      try {
        const data = await axios
          .get(`/api/cloud/orgs/${org}/projects/${project}/clusters`)
          .then((res) => res.data);
        setClusters(data.data.items);
      } catch (error: any) {
        setClusters([]);
        logger.error(
          { error, name: 'NewRequestSection/TiDBCloudClusterSection' },
          'Error fetching clusters from TiDB Cloud'
        );
        enqueueSnackbar(`${error?.response?.data?.message || error?.message}`, {
          variant: 'error',
        });
      }
    };
    if (project) {
      fetchClusters();
    }
  }, [enqueueSnackbar, org, project]);

  React.useEffect(() => {
    if (onChange) {
      onChange({
        org: orgs?.find((item) => item.id === org) || null,
        project: projects?.find((item) => item.id === project) || null,
        cluster: clusters?.find((item) => item.id === cluster) || null,
      });
    }
  }, [org, project, cluster, orgs, projects, clusters]);

  return (
    <>
      <FormControl
        id="cloud_form_orgs"
        size="small"
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: '0.5rem',
        }}
      >
        <FormLabel>{`*` + t('new_request.organization_id')}</FormLabel>
        {orgs ? (
          <Select value={org} onChange={handleOrgChange} displayEmpty>
            {orgs.map((orgItem) => (
              <MenuItem key={orgItem.id} value={orgItem.id}>
                <Typography variant="body1" component="span">
                  {orgItem.name}
                </Typography>
                <Typography
                  variant="body1"
                  component="span"
                  color="text.secondary"
                >
                  {` [${orgItem.plan}]`}
                </Typography>
              </MenuItem>
            ))}
          </Select>
        ) : (
          <Skeleton variant="rounded" animation="wave" height={40} />
        )}
        <FormHelperText>
          {t('new_request.organization_id_helper_text')}
        </FormHelperText>
      </FormControl>

      {!!org && (
        <FormControl
          id="cloud_form_projects"
          size="small"
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: '0.5rem',
          }}
        >
          <FormLabel>{t('new_request.project_id')}</FormLabel>
          {projects && projects.length > 0 && (
            <Select value={project} onChange={handleProjectChange} displayEmpty>
              {projects.map((projectItem) => (
                <MenuItem key={projectItem.id} value={projectItem.id}>
                  <Typography variant="body1" component="span">
                    {projectItem.name}
                  </Typography>
                  <Typography
                    variant="body1"
                    component="span"
                    color="text.secondary"
                  >
                    {` (${projectItem.active_clusters_count})`}
                  </Typography>
                </MenuItem>
              ))}
            </Select>
          )}
          {projects && projects.length === 0 && (
            <Select disabled value="" error>
              {/* <MenuItem value="">Empty</MenuItem> */}
            </Select>
          )}
          {!projects && (
            <Skeleton variant="rounded" animation="wave" height={40} />
          )}
          <FormHelperText>
            {t('new_request.project_id_helper_text')}
          </FormHelperText>
        </FormControl>
      )}

      {!!project && (
        <FormControl
          id="cloud_form_clusters"
          size="small"
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: '0.5rem',
          }}
        >
          <FormLabel>{t('new_request.cluster_name')}</FormLabel>
          {clusters && clusters.length > 0 && (
            <Select value={cluster} onChange={handleClusterChange} displayEmpty>
              {clusters.map((clusterItem) => (
                <MenuItem key={clusterItem.id} value={clusterItem.id}>
                  <Typography variant="body1" component="span">
                    {clusterItem.name}
                  </Typography>
                  <Typography
                    variant="body1"
                    component="span"
                    color="text.secondary"
                  >
                    {` (${clusterItem.status})`}
                  </Typography>
                </MenuItem>
              ))}
            </Select>
          )}
          {clusters && clusters.length === 0 && (
            <Select disabled value="" error>
              {/* <MenuItem value="">Empty</MenuItem> */}
            </Select>
          )}
          {!clusters && (
            <Skeleton variant="rounded" animation="wave" height={40} />
          )}
          <FormHelperText>
            {t('new_request.cluster_name_helper_text')}
          </FormHelperText>
        </FormControl>
      )}
    </>
  );
}