import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';

import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { IconChevronRight } from '@/ui/display/icon';
import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Section } from '@/ui/layout/section/components/Section';
import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';

const StyledRowRightContainer = styled.div`
  align-items: center;
  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
`;

export const SettingsAccountsCalendarSettingsSection = () => {
  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
  const navigate = useNavigate();

  const { records: _accounts, loading } = useFindManyRecords<ConnectedAccount>({
    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
    filter: {
      accountOwnerId: {
        eq: currentWorkspaceMember?.id,
      },
    },
  });

  return (
    <Section>
      <H2Title
        title="Calendar settings"
        description="Sync your calendars and set your preferences"
      />
      <SettingsAccountsListCard
        accounts={mockedConnectedAccounts}
        isLoading={loading}
        onRowClick={(account) =>
          navigate(`/settings/accounts/calendars/${account.id}`)
        }
        RowIcon={IconGoogleCalendar}
        RowRightComponent={({ account: _account }) => (
          <StyledRowRightContainer>
            <SettingsAccountsSynchronizationStatus synced />
            <LightIconButton Icon={IconChevronRight} accent="tertiary" />
          </StyledRowRightContainer>
        )}
      />
    </Section>
  );
};