import { FC } from 'react';

import Grid from '@material-hu/mui/Grid';

import CommunityCard from 'src/pages/newCommunity/components/CommunityCard';
import ColorInput from 'src/pages/newCommunity/inputs/ColorInput';
import CompanySizeInput from 'src/pages/newCommunity/inputs/CompanySizeInput';
import LanguageInput from 'src/pages/newCommunity/inputs/LanguageInput';
import LogoInput from 'src/pages/newCommunity/inputs/LogoInput';
import OrganizationNameInpput from 'src/pages/newCommunity/inputs/OrganizationNameInput';
import { useLokaliseTranslation } from 'src/utils/i18n';

import TimezoneInput from './inputs/TimezoneInput';

export type FirstStepTestProps = {};

const FirstStepNewCommunity: FC<FirstStepTestProps> = () => {
  const { t } = useLokaliseTranslation('authentication');

  return (
    <>
      <CommunityCard
        title={t('NAME_ORGANIZATION_TITLE')}
        firstElement
        required
      >
        <OrganizationNameInpput />
      </CommunityCard>
      <CommunityCard
        title={t('NUMBER_PEOPLE_ORGANIZATION')}
        required
      >
        <CompanySizeInput />
      </CommunityCard>
      <CommunityCard
        title={t('LANGUAGE_ORGANIZATION')}
        required
      >
        <LanguageInput />
      </CommunityCard>
      <CommunityCard
        title={t('TIMEZONE')}
        required
      >
        <TimezoneInput />
      </CommunityCard>
      <Grid
        container
        spacing={2}
        sx={{ mb: 2 }}
      >
        <Grid
          item
          xs={12}
          md={6}
        >
          <CommunityCard title={t('COLOR_TITLE')}>
            <ColorInput />
          </CommunityCard>
        </Grid>
        <Grid
          item
          xs={12}
          md={6}
        >
          <CommunityCard title={t('LOGO_TITLE')}>
            <LogoInput />
          </CommunityCard>
        </Grid>
      </Grid>
    </>
  );
};

export default FirstStepNewCommunity;