import * as React from 'react';
import { useTranslation } from 'utils/i18n';
import classNames from 'classnames/bind';

import TimeField from 'react-simple-timefield';
import Switch from 'components/switch/Switch';
import { InfoText, CloseButton, ArrowLink, TextBox } from '@nova-hf/ui';
import { IDay, IOpeningInfo } from 'typings';

import s from './ServiceOpeningHours.module.scss';

const cn = classNames.bind(s);

interface IServiceOpeningHoursProps {
  color?: string;
  days: IDay[];
  changeHours(key: any, opening: any, index: any, value: string): any;
  removePeriod(day: any, index: any): any;
  addPeriod(day: IDay): any;
  toggle: any;
}

export const ServiceOpeningHours = ({
  days,
  color,
  changeHours,
  removePeriod,
  addPeriod,
  toggle,
}: IServiceOpeningHoursProps) => {
  const { t } = useTranslation('stillingar');

  return (
    <div className={s.openingHours}>
      {days?.map(({ day, openingInfo }: IDay) => {
        const isDayOpen = openingInfo.length != 0;

        return (
          <div className={s.openingHours__day} key={`dagur - ${day}`}>
            <div className={s.openingHours__dayName}>
              {t(`doorman.openingHours.daysOfWeek.${day}`)}
            </div>
            <div className={cn(s.openingHours__switch, { closed: !isDayOpen })}>
              <Switch
                isOn={openingInfo?.length > 0}
                onToggle={() => toggle({ day, openingInfo })}
                color={color}
              />
            </div>
            {isDayOpen && (
              <div className={s.openingHours__hours}>
                {openingInfo.map((period: IOpeningInfo, index: number) => (
                  <div className={s.openingHours__period} key={`${day} - ${index}`}>
                    <div className={s.openingHours__from}>
                      <TimeField
                        onChange={(_, time) =>
                          changeHours('opens', { day, openingInfo }, index, time)
                        }
                        value={period.opens}
                        input={
                          <TextBox
                            name={`${day} - ${index} - opens`}
                            label={t('doorman.openingHours.opens')}
                            length={5}
                            value={period.opens}
                            type="tel"
                          />
                        }
                      />
                    </div>
                    <div className={s.openingHours__to}>
                      <TimeField
                        onChange={(_, time) =>
                          changeHours('closes', { day, openingInfo }, index, time)
                        }
                        value={period.closes}
                        input={
                          <TextBox
                            name={`${day} - ${index} - closes`}
                            label={t('doorman.openingHours.closes')}
                            length={5}
                            value={period.closes}
                            type="tel"
                          />
                        }
                      />
                    </div>
                    <div className={s.openingHours__close}>
                      <div className={s.openingHours__closeButton}>
                        <CloseButton onClick={() => removePeriod(day, index)} />
                      </div>
                    </div>
                  </div>
                ))}

                <div className={s.openingHours__add}>
                  <ArrowLink onClick={() => addPeriod({ day, openingInfo })} color={color} big>
                    {t('doorman.buttons.addHours')}
                  </ArrowLink>
                </div>
              </div>
            )}
            {!isDayOpen && (
              <div className={s.openingHours__closed}>
                <InfoText>{t('doorman.openingHours.isClosed')}</InfoText>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};